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

Question

我是 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 属性而无需手动固定宽度？在哪些用例中它实际上可以在没有任何包装代码的情况下工作？

Answer 1

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

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