无法对齐图标和文本基线答案

【问题标题】：Can't align icon and text baseline无法对齐图标和文本基线
【发布时间】：2021-07-06 12:43:58
【问题描述】：

我正在尝试使用 CrossAxisAlignment.baseline 对齐图标和文本，但我无法正确。

我想要什么

我得到了什么

这是我的代码：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Icon(Icons.cloud_outlined),
    Text(
      "Cloud",
      style: TextStyle(fontSize: 18),
    )
  ],
)

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

只需将交叉轴对齐更改为结束

Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                textBaseline: TextBaseline.alphabetic,
                children: [
                  Icon(Icons.cloud_outlined, size: 20),
                  SizedBox(width: 5),
                  Text(
                    "Cloud",
                    style: TextStyle(fontSize: 18),
                  )
                ],
              ),

结果：-

【讨论】：

我需要将两者都对齐到底部，所以我尝试了第二个 sn-p 并没有解决问题，似乎文本与图标正确对齐，但图标有1:1 的纵横比导致底部有一种我无法移除的填充
您是否复制了与我的 sn-p 中提供的代码相同的代码，因为我正在获取正确的图像，如我的更新答案中所示。
我做到了，但问题是它只适用于这些尺寸，如果我想调整例如文本的大小，它又没有对齐

【解决方案2】：

你可以使用 ListTile insted of Row

 ListTile(
        leading: Icon(Icons.cloud_outlined),
        title: Text(
          "Cloud",
          style: TextStyle(fontSize: 18),
        ),
      ),

【讨论】：