CrossAxisAlignment 不居中列小部件答案

【问题标题】：CrossAxisAlignment does not center column widgetsCrossAxisAlignment 不居中列小部件
【发布时间】：2019-12-10 20:45:03
【问题描述】：

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

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

添加alignment

body: Container(
    alignment: Alignment.topCenter, ...

【讨论】：

【解决方案3】：

您也可以这样做。 1.宽度=_宽度， 2.alignment = Alignment.center,

 double width = MediaQuery.of(context).size.width;
 Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    elevation: 0.0,
    leading: Icon(
      Icons.arrow_back_ios,
      color: Colors.black,
    ),
  ),
  body: Container(
    width = _width,
    alignment = Alignment.center,
    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,
          ),
        ),
      ],
    ),
  )
);

【讨论】：

【解决方案4】：

如果属性 CrossAxisAlignment 不起作用，您可以将小部件包装在 Row 中并设置 mainAxisAlignment: MainAxisAlignment.center。这不是解决这个问题的最佳方案，因为我们创建了额外的小部件。

【讨论】：