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

Question

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

我正在尝试创建一个应用程序，但两个文本 'hello and mr '' 位于中心，即使我没有添加中心小部件，为什么它们有那么多 space它们之间。应用程序标题有一个巨大的底部填充，我不得不将其删除。应用示例在上图中。我只是想让两者在左上角堆叠在一起，并且它们之间的 space 减少，这是我的代码：

    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

Answer 1

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

示例：

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

Answer 2

您的问题的一个解决方案是将列的 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,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  )

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

Answer 3

问题是你没有给 top-most 列一个 crossAxisAlignment，所以默认情况下，它是 centred.Add 这个给 top-most 列

crossAxisAlignment: CrossAxisAlignment.start,

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

text widget keeps centering without centre widget

android

dart

flutter

flutter-test

flutter-layout