Flutter中如何使Icon相对于Text组件垂直居中对齐？

针对你遇到的Row内Icon和Text视觉上不对齐的问题，这里有几个可靠的解决方案：

方案1：使用IntrinsicHeight强制行内元素高度一致，再垂直居中 #

IntrinsicHeight会让Row内的所有子组件高度拉伸到最高元素的高度，再配合CrossAxisAlignment.center就能让两者真正垂直居中：

Widget header() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Welcome back",
        style: TextStyle(
          fontSize: 20,
        ),
      ),
      IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "User name",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(width: 4), // 可选：给Icon和Text加一点间距
            Icon(
              kVerifiedIcon,
              color: kPrimaryColor,
              size: 15,
            ),
          ],
        ),
      ),
    ],
  );
}

方案2：为Text设置textBaseline并调整Row的对齐方式 #

因为Text的默认基线是alphabetic，而Icon的对齐基于几何中心，通过指定textBaseline为ideographic，可以让Text和Icon的视觉中心对齐：

Widget header() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Welcome back",
        style: TextStyle(
          fontSize: 20,
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.ideographic,
        children: [
          Text(
            "User name",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(width: 4),
          Icon(
            kVerifiedIcon,
            color: kPrimaryColor,
            size: 15,
          ),
        ],
      ),
    ],
  );
}

方案3：用Align包裹Icon微调对齐 #

如果以上方案仍有细微偏差，可以直接用Align组件手动调整Icon的垂直位置：

Widget header() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Welcome back",
        style: TextStyle(
          fontSize: 20,
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "User name",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(width: 4),
          Align(
            alignment: Alignment.center,
            heightFactor: 1.1, // 根据实际情况微调，大于1向上，小于1向下
            child: Icon(
              kVerifiedIcon,
              color: kPrimaryColor,
              size: 15,
            ),
          ),
        ],
      ),
    ],
  );
}

这些方案中，方案1和方案2属于布局层面的通用解决方法，不会依赖硬编码数值，推荐优先尝试。

内容的提问来源于stack exchange，提问作者Toxic Prince