Flutter中如何让Row组件内的Text与Icon垂直居中？

你当前代码里的Row虽已设置crossAxisAlignment: CrossAxisAlignment.center，但因文本字号较大（32号），默认的文本基线对齐逻辑会导致视觉上未对齐。可通过以下两种方法解决：

方法一：基于基线对齐 #

将Row的crossAxisAlignment改为CrossAxisAlignment.baseline，同时指定统一的文本基线，让图标与文本的基线对齐：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Icon(
      Icons.visibility_off_outlined,
      color: Colors.black.withOpacity(0.25),
    ),
    Text(
      "..........",
      style: TextStyle(
        color: Color(0xFF0E5699),
        fontSize: 32,
        fontWeight: FontWeight.w700,
      ),
    ),
  ],
)

方法二：强制图标居中对齐 #

把Icon包裹在Center组件内，确保它与文本的垂直中心完全对齐：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Center(
      child: Icon(
        Icons.visibility_off_outlined,
        color: Colors.black.withOpacity(0.25),
      ),
    ),
    Text(
      "..........",
      style: TextStyle(
        color: Color(0xFF0E5699),
        fontSize: 32,
        fontWeight: FontWeight.w700,
      ),
    ),
  ],
)

注意：你之前使用的textAlign: TextAlign.center是控制文本在自身宽度范围内的水平居中，和Row内的垂直对齐无关，因此不会解决当前问题。

内容的提问来源于stack exchange，提问作者Viet Nguyen