Flutter如何在屏幕中居中放置2个及以上的Widget？

问题原因 #

你单独使用Column时，组件默认会适配子元素的宽度，并不会占满屏幕横向空间，因此CrossAxisAlignment.center只会在Column自身的窄宽度范围内居中内容，无法实现相对于全屏幕的横向居中效果。

最优解决方案 #

最简单的实现方式是直接用Center组件包裹Column，Center会自动占满父级容器的全部空间，直接将子组件定位到屏幕正中心，代码更简洁：

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        '$_counter',
        style: TextStyle(
            fontSize: 40.0,
            fontFamily: 'Hero',
            fontWeight: FontWeight.bold),
      ),
      ElevatedButton(
          onPressed: () {
            setState(() {
              _counter += 1;
            });
          },
          child: Text('Increment')),
      ElevatedButton(
          onPressed: () {
            setState(() {
              _counter -= 1;
            });
          },
          child: Text('Decrement'))
    ],
  ),
)

可选方案 #

如果不想额外嵌套Center组件，也可以给Column增加全宽约束，让它占满屏幕横向空间，此时CrossAxisAlignment的居中规则就会相对于全屏幕生效：

body: SizedBox.expand(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        '$_counter',
        style: TextStyle(
            fontSize: 40.0,
            fontFamily: 'Hero',
            fontWeight: FontWeight.bold),
      ),
      ElevatedButton(
          onPressed: () {
            setState(() {
              _counter += 1;
            });
          },
          child: Text('Increment')),
      ElevatedButton(
          onPressed: () {
            setState(() {
              _counter -= 1;
            });
          },
          child: Text('Decrement'))
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Shiven Saini