带有 2 个子图标和（扩展）文本（长）的行，它们之间有空格答案

【问题标题】：Row with 2 children icon and (Expanded) text (a long one) space between them带有 2 个子图标和（扩展）文本（长）的行，它们之间有空格
【发布时间】：2020-10-01 10:38:33
【问题描述】：

我有一排有 2 个孩子，一个图标（位置）和文字

这里是示例图片

              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    Expanded(
                      child: Text(
                        "Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),

这在图标和文本之间有一些空间。如果我对齐文本开始，那么它没有空格，但第二行也从开始，我希望文本居中

我希望位置 iocn 和文本中没有任何空格，例如电话号码或电子邮件地址。

【问题讨论】：

标签： flutter flutter-row

【解决方案1】：

之所以这样，是因为Expanded 小部件正在将小部件的宽度扩展为尽可能大，以便为文本开始新的一行。您可以通过将颜色分配给容器小部件来检查它，以查看每个容器的大小，如下所示：

如您所见，文本容器（绿色的）已展开，并导致图标和文本之间出现空格。

要临时解决此问题，您可以设置：

textAlign: TextAlign.center, -> textAlign: TextAlign.left,

或者你可以把它改成这样的列

Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Icon(
                  Icons.location_on,
                  color: Colors.white,
                ),
                Text(
                  "Kyla Olsen", // split some short text here
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left: 10.0), //Based on icon size, I assume that it is 10px
                child: Text(
                  "Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ]
        ),

输出会是这样的

我知道这是一个愚蠢的解决方案，但它确实有效。

【讨论】：

我希望地址使用尽可能少的行。顺便说一句，不错的 hack :)

【解决方案2】：

快速修复，将您的扩展小部件将您的文本包装为灵活小部件，如下所示：

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    Flexible(
                      child: Text(
                        "Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),

【讨论】：

Flexible 与 Expanded 的效果相同
你试过Netnichaa方法了吗？