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

Question

我有一排有 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 和文本没有任何空间，例如电话号码或电子邮件地址。

Answer 1

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

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),
                      ),
                    ),
                  ],
                ),

Answer 2

之所以这样，是因为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),
                ),
              ),
            ),
          ]
        ),

输出将是这样的

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