flutter - CrossAxisAlignment 不会使列小部件居中

我是 flutter 的新手，我一直试图将我的列小部件居中以了解布局，但 Column 的 CrossAxisAlignment 属性似乎不起作用。

我曾尝试将该列封闭到其他几个小部件(如容器)中，但到目前为止我发现的解决方案只是覆盖了 CrossAxisAlignment 属性的核心功能。
如果我将整个 Column 包裹在一个 Center 小部件中，那么默认情况下它会以水平轴为中心，并且 CrossAxisAlignment 属性将不起作用。

我找到的唯一解决方案是将列包装在容器中并将其宽度属性设置为占据屏幕的整个宽度，但这似乎是强制布局而不是使用 Flutter 的动态行为。

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        leading: Icon(
          Icons.arrow_back_ios,
          color: Colors.black,
        ),
      ),
      body: Container(
      color: Colors.grey[500],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            color: Colors.orange,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.blue,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.purple,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
        ],
      ),
    )
);

输出 :



只有通过硬设置宽度属性才能正确居中

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

输出 :



我的问题是有没有更好的方法来使用 CrossAxisAlignment 属性而不手动固定宽度？
在什么用例中，它实际上可以在没有任何包装代码的情况下工作？

最佳答案

问题是:CrossAxisAlignment 有效，但您的列仅与图像上显示的一样宽。这样看起来好像什么都没发生。

要使您的项目位于屏幕中央，您必须将整个列移动到中央。您可以通过将列包装在 Align 小部件中并设置 alignment: Alignment.center 来实现此目的。

关于flutter - CrossAxisAlignment 不会使列小部件居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57322803/