Почему мои виджеты не в центре экрана?

Question

Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        'BMI:',
        style: TextStyle(color: Colors.white, fontSize: 50.0),
      ),
      FlatButton(
        child: Text('GO BACK'),
        color: Colors.grey,
        onPressed: () {
          Navigator.pop(context);
        },
      )
    ],
  ),
);}

Я просто хочу, чтобы текст и кнопка были в центре экрана по вертикали и горизонтали. Я установил выравнивание по главной и поперечной осям по центру, но столбец находится в левой части экрана, хотя он центрирован по вертикали. Только не по горизонтали; Я думал, что для этого нужно перекрестное выравнивание, почему это не центрирует его?

Answer 1

Дело в том, что CrossAxisAlignment работает, но ширина вашего столбца равна ширине, показанной на изображении. Таким образом, похоже, что ничего не происходит. ссылка . Надеюсь, это поможет.

Совет: - Используйте Flutter Inspector в студии android, чтобы получить правильные представления о положении и выравнивании виджета.

Answer 2

Я думаю, это потому, что ширина столбца равна ширине его самого большого дочернего элемента, то есть, если у вас нет очень широкого элемента, он разместит все остальное в центре в соответствии с самым широким дочерним элементом, поэтому, если вы добавите:

Container(width:MediaQuery.of(context).size.width),

дочерним элементам Column, которые также должны решить проблему

Answer 3

с помощью инструмента инспектора в Android studio, столбец не занимает всю ширину устройства.

Таким образом, вы можете либо обернуть его по центру виджета:

Center(
  child:Column(children:[...],...)
  );

, либо обернуть его в контейнер и указать высоту .

Container(
  height: value,
  child:Column(children:[...],...)
  );

Answer 4

Решение 1:

Оберните Column в Center виджет

Решение 2:

Оберните столбец в виджете «Контейнер» и установите ширину контейнера double.infinity.

Почему это происходит, ширина столбца установлена ​​на наибольшую ширину его дочернего элемента, чтобы убедиться, что вы можете снова попробовать обернуть столбец в контейнере, на этот раз установите цвет на Colours.red и не указывайте явно ширину виджета-контейнера. Вы заметите, что Column принимает ширину самого широкого элемента своих дочерних элементов.