Как центрировать столбец по вертикали во Flutter? Воспользовался виджетом «Новый Центр». Я использовал виджет «Новый центр», но он не центрирует мою колонку по вертикали? Любые идеи были бы полезны ....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: [
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}

Zeusox

Ответы (10)

Решение, предложенное Азизом:

Столбец (
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  дети: [
    // здесь ваши виджеты ...
  ],
)

Это не будет точно в центре из-за заполнения:

padding: EdgeInsets.all(25.0),

Чтобы сделать столбец точно по центру - по крайней мере, в этом случае - вам нужно удалить отступы.

В столбце используйте:

mainAxisAlignment: MainAxisAlignment.center

Он выравнивает своих дочерних элементов по центру своего родительского пространства по вертикали

При использовании столбца используйте его внутри виджета столбца:

mainAxisAlignment: MainAxisAlignment.center

Он выравнивает своих дочерних элементов по центру родительского пространства, которое является его главной осью, т.е. по вертикали

или, оберните столбец виджетом Center:

Center(
  child: Column(
    children: ,
  ),
)

, если это не решит проблему, оберните родительский контейнер расширенным виджетом ..

Expanded(
   child:Container(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: children,
     ),
   ),
)

Для меня проблема заключалась в том, что внутри столбца был развернут, который мне пришлось удалить, и он сработал.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

Попробуйте:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)

Вы управляете выравниванием дочерних элементов строки или столбца с помощью свойств mainAxisAlignment и crossAxisAlignment. Для ряда главная ось проходит горизонтально, а поперечная ось - вертикально. Для колонны главная ось проходит вертикально, а поперечная ось - горизонтально.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

Попробуйте вот это. Он центрируется по вертикали и горизонтали.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

CrossAlignment.center использует ширину «Дочернего виджета» для центрирования и, следовательно, визуализируется в начале страницы.

Когда столбец центрирован в пределах «Центрального контейнера» тела страницы, CrossAlignment.center использует «Центр» тела страницы в качестве ссылки и отображает виджет в центре страницы

enter image description here

Код

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    title:"DynamicWidgetApp",
    home:DynamicWidgetApp(),

));

class DynamicWidgetApp extends StatefulWidget{
  @override
  DynamicWidgetAppState createState() => DynamicWidgetAppState();
  }

class  DynamicWidgetAppState extends State{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
     //Removing body:Center will change the reference
    // and render the widget at the start of the page 
        child: Column(
            mainAxisAlignment : MainAxisAlignment.center,
            crossAxisAlignment : CrossAxisAlignment.center,
            children: [
              Text("My Centered Widget"),
            ]
          ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: ,
        child : Icon(Icons.add),
      ),
      );
    }
  }

Вы могли бы использовать. mainAxisAlignment: MainAxisAlignment.center Таким образом, материал будет проходить через центр столбца. `crossAxisAlignment: CrossAxisAlignment.center ' Это позволит выровнять элементы по центру в ряду.

Контейнер (выравнивание: Alignment.center, Дочерний: Столбец ())

Просто используйте. Центр (Потомок: Столбец ()) или рэп с виджетом Padding. И отрегулируйте Padding так, чтобы дочерние элементы столбца были в центре.

Другое решение!

Если вы хотите установить виджеты в центральной вертикальной форме, вы можете использовать для этого ListView. например: я использовал три кнопки и добавил их в ListView, за которым следовало

shrinkWrap: true -> С помощью этого ListView занимает только необходимое пространство.

import 'package:flutter/material.dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: [button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Вывод:

enter image description here

2022 WebDevInsider