Question

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

我正在尝试创建一个应用程序，但是即使我没有添加中心小部件，两个文本“ hello和mr”也位于中间，为什么它们之间会有这么大的空间。该应用程序标题具有很大的底部填充，我必须将其删除。”该应用程序示例在上图中。我只希望两者在左上角彼此叠放，并减小它们之间的间距，这是我的代码：

    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

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

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

{{1}}

像这样？希望能有所帮助。

Answer 2

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

示例：

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

Answer 3

问题是您没有将crossAxisAlignment赋予最顶部的列，因此默认情况下它居中。将其添加到最顶部的列

crossAxisAlignment: CrossAxisAlignment.start,

文本小部件保持居中而没有中心小部件

3 个答案: