Flutter中Column的crossAxisAlignment不生效如何让子容器水平居中？

水平居中失效原因 #

你设置的crossAxisAlignment: CrossAxisAlignment.center没有生效，是因为默认Column的宽度会自适应为子组件的最大宽度，当前你的子Container宽度都是150，Column宽度也只有150，在这个宽度范围内居中自然看不出效果。只需要让Column的宽度撑满屏幕宽度，居中配置就会生效。

修正后代码 #

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用SizedBox.expand让Column撑满全屏宽高
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end, 
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 25,),
            Container(color: Colors.red, width: 150, height: 80,),
            const SizedBox(height: 10,),
            Container(color: Colors.red, width: 150, height: 80,),
            const SizedBox(height: 10,),
            Container(color: Colors.red, width: 150, height: 80,),
            const SizedBox(height: 10,),
            Container(color: Colors.red, width: 150, height: 80,),
            const SizedBox(height: 10,),
            Container(color: Colors.red, width: 150, height: 80,),
            const SizedBox(height: 10,),
            Container(color: Colors.red, width: 150, height: 80,),
          ]
        ),
      )
    );
  }
}

间距实现方案说明 #

使用SizedBox控制间距属于可用方案，但不是最优，子组件数量较多时需要重复编写SizedBox，维护成本高，更推荐以下实现方式：

• Flutter 3.16及以上版本可以直接使用Column自带的mainAxisSpacing参数统一设置子组件垂直间距，无需重复添加SizedBox：

Column(
  mainAxisAlignment: MainAxisAlignment.end, 
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSpacing: 10, // 统一设置子组件间的垂直间距
  children: <Widget>[
    const SizedBox(height: 25,),
    Container(color: Colors.red, width: 150, height: 80,),
    Container(color: Colors.red, width: 150, height: 80,),
    Container(color: Colors.red, width: 150, height: 80,),
    Container(color: Colors.red, width: 150, height: 80,),
    Container(color: Colors.red, width: 150, height: 80,),
    Container(color: Colors.red, width: 150, height: 80,),
  ]
)

• 可以使用gap组件库的Gap组件，语义比SizedBox更清晰，会自动适配主轴方向设置对应间隔。
• 如果子组件是动态生成的列表，优先使用ListView.separated，通过separatorBuilder统一生成间隔组件。

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