在中心对齐列，但在 Flutter 中将文本对齐到屏幕左侧

Posted 2023-02-23

【中文标题】在中心对齐列，但在 Flutter 中将文本对齐到屏幕左侧

【英文标题】：Align Column in Center but align Text to left of screen in Flutter

【发布时间】：2020-05-14 23:53:27

【问题描述】：

很抱歉问了这么一个微不足道的问题，但我无能为力。我刚刚花了 3 个小时试图让一列在中心对齐，如果没有 Container，我无法做到这一点，现在我无法将文本放在屏幕左侧。

为了更好地解释它，我在我的应用程序中心有一个我想要的列。顶部有文本，它向左移动，但列中的所有其他小部件都居中。

对于我尝试过 mainAxisAlign 和 crossAxisAlign 的列。前者绝对什么都不做，而后者则朝着错误的方向前进（垂直居中而不是水平居中，这不是我想要的）。经过多次其他尝试后，我求助于使用容器，但现在我无法将文本移到左侧。我使用textAlign: TextAlign.Left 并尝试通过将容器放入SizedBox.expand() 来扩展容器以适应屏幕，但没有任何反应。

谁能解释一下如何将列居中，然后将文本向左对齐？

这是我迄今为止尝试过的：

return SizedBox.expand(
                child: Container(
                alignment: Alignment.center,
                child: Column(
                    children:
                    [
                        Text(
                            text,
                            style: TextStyle(
                                fontSize: 25.0,
                            ),
                            textAlign: TextAlign.left,
                        ),
                        CircularProgressIndicator(
                            backgroundColor: Colors.white10,
                            strokeWidth: 5,
                        )
                    ],
                    crossAxisAlignment: CrossAxisAlignment.center,
                ),
                margin: EdgeInsets.all(10.0),
            )
        );

Just in case I'm explaining this terribly, here is a basic picture 谢谢！

【问题讨论】：

您能否发布您迄今为止尝试过的代码以及预期设计的草图？

@ManishRaj 现在完成了 :)

【参考方案1】：

使用Align() 小部件

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: 
          Text(
              'text',
            ),
          ),
        ],
      ),

【参考方案2】：

您应该使用行和列的组合。行水平扩展，列可以垂直扩展。

SizedBox.expand(
              child: Padding(
                  padding: EdgeInsets.all(12.0),
                  child: Column(children: <Widget>[
                    Row(children: <Widget>[Text('Hello')]),
                    Expanded(
                        child: Column(
                            children: <Widget>[CircularProgressIndicator()],
                            mainAxisAlignment: MainAxisAlignment.center))
                  ])))

【参考方案3】：

你可以这样做

 Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [

                         
                        ],
                      ),
                    )