Question

我是个新手，我一直在尝试使列小部件居中，只是为了了解布局，但是Column的CrossAxisAlignment属性似乎不起作用。

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

我发现的唯一解决方案是将列包装在容器中，并将其width属性设置为占据屏幕的整个宽度，但这似乎是在强制布局，而不是使用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,
            ),
          ),
        ],
      ),
    )
);

输出：

只有通过硬设置width属性，它才能正确居中

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

输出：

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

Answer 1

添加alignment

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

Answer 2

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

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

Answer 3

这也是您可以执行此操作的方式。 1. width = _width， 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,
          ),
        ),
      ],
    ),
  )
);

Answer 4

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

CrossAxisAlignment不会使列窗口小部件居中

4 个答案: