文本小部件在没有中心小部件的情况下保持居中答案

【问题标题】：text widget keeps centering without centre widget文本小部件在没有中心小部件的情况下保持居中
【发布时间】：2021-01-14 02:00:06
【问题描述】：

image link since i'm not allowed to post images yet

我正在尝试创建一个应用程序，但即使我没有添加中心小部件，两个文本“你好”和“先生”也位于中心，为什么它们之间有这么大的空间。应用程序标题有一个巨大的底部填充，我不得不将其删除。应用示例在上图中。我只是想让两者在左上角相互堆叠，并减少它们之间的空间，这是我的代码：

    Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Hello,',
            style: Theme.of(context)
                .textTheme.headline4
                .apply( color: Colors.grey),
          ),
          Text(
            "Mr. Udeinya",
            style: Theme.of(context)
                .textTheme
                .headline4
                .apply(color: Colors.deepOrange, fontWeightDelta: 2),
          ),

          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),

                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),

还有图片

image link since i'm not allowed to post images yet

【问题讨论】：

你好。你对这个问题的描述很难理解。请查看问题指南以进行改进：stackoverflow.com/help/how-to-ask
您是否尝试过使用列小部件的MainAxisAlignment 和CrossAxisAlignment 属性？
您是否尝试过改用RichText 小部件？

标签： android flutter dart flutter-layout flutter-test

【解决方案1】：

解决问题的一种方法是将列的 crossAxisAlignment 属性更改为 CrossAxisAlignment.start

如果您打算将它们组合在一起，我还建议您将两个文本小部件放在一个列中。

Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Hello,',
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.grey),
              ),
              Text(
                "Mr. Udeinya",
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.deepOrange, fontWeightDelta: 2),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  )

像这样的东西？希望对您有所帮助。

【讨论】：

【解决方案2】：

问题是您没有将 crossAxisAlignment 分配给最顶层的列，因此默认情况下它是居中的。将此添加到最顶层的列

crossAxisAlignment: CrossAxisAlignment.start,

【讨论】：

啊，谢谢你的帮助。这是否也可以修复它们之间的空间

【解决方案3】：

尝试使用 Text 小部件的文本对齐属性，您可以在链接中找到更多信息。 Text widget documentation

例子：

 Text("data,",textAlign: TextAlign.left,)

【讨论】：