flutter - 在颤动中居中一列容器，crossAxis不起作用

Question

我试图将一列从底部垂直开始的容器居中，但是我不能让它们水平居中。

mainAxisAlignment 可以很好地将它们放在底部，但是 crossAxis 根本没有反应。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(

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


        children: <Widget>[

        SizedBox(height: 25,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),

        ]
    ),
      
    );
  }
}

我也试过用 Align 包裹，但没有运气。

（我正在使用 SizedBox 来分隔它们，不知道这是否是最佳方法。）

标签： flutterdartflutter-layout

Answer 1

Column用小部件包裹Center。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 25,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
          ],
        ),
      ),
    );
  }
}