【问题标题】:Align Column in Center but align Text to left of screen in Flutter在中心对齐列,但在 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 现在完成了 :)

标签: flutter dart


【解决方案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: [
      
                               
                              ],
                            ),
                          )
      

      【讨论】: