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

问题描述

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

I am new to flutter and I have been trying to center my column widgets just to grasp an understanding of the layouts but the CrossAxisAlignment property of the Column doesn't seem to work.

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

I have tried enclosing the column into several other widgets like container but the solutions I have found so far just overwrite the core functionality of CrossAxisAlignment property.If I wrap the entire the Column in a Center widget then it is centered on the horizontal axis by default and CrossAxisAlignment property wouldn't work.

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

The only solution I found was to wrap the column in a container and setting its width property to take up entire width of the screen but that seems like brute forcing the layout instead of using the dynamic behaviour of 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属性，它才能正确居中

Only by hard setting the width property does it center properly

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

输出:

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

My question is is there a better way to use CrossAxisAlignment property without manually fixing the width?And in what use cases does it actually work without any wrapper code?

推荐答案

问题是:CrossAxisAlignment可以工作，但是您的列仅与图像上显示的宽度相同.这样看来一切都没有发生.

The thing is: the CrossAxisAlignment works, but your column is only as wide as it shows on the image. This way it looks like nothing is happening.

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

To get your items in the center of the screen, you have to move your entire Column to the center. You can achieve this by wrapping your column inside an Align widget and setting alignment: Alignment.center.

这篇关于CrossAxisAlignment不会使列窗口小部件居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！