Flutter中Text组件中英文行高不一致是什么原因？如何实现行高统一？

你遇到的这个是Flutter中英文混排的常见问题，具体原因和解决方案如下：

产生原因 #

• 核心是中英文默认字体的字形度量规则不同：中文默认字体的设计天生带有更大的上下预留边距，即使设置了相同的fontSize，两种文字对应的行高计算结果也不一样。
• Flutter的Text组件默认没有强制固定行高，会优先读取字体本身的度量参数计算渲染高度，所以才会出现中文背景色块明显高于英文的情况。

解决方法 #

方案1：强制固定行高规则（最常用） #

给TextStyle配置height参数，同时搭配行高分布和边距配置，强制中英文使用统一的行高计算规则：

Center(
  child: Text(
    'hello 你好',
    style: TextStyle(
      backgroundColor: Colors.red,
      fontSize: 24,
      // 最终行高 = fontSize * height，数值可以根据实际需求调整
      height: 1.2,
      // 行高上下均匀分配，不会跟随字体默认规则偏移
      leadingDistribution: TextLeadingDistribution.even,
    ),
    // 关闭字体自带的上下边距补偿
    textHeightBehavior: const TextHeightBehavior(
      applyHeightToFirstAscent: false,
      applyHeightToLastDescent: false,
    ),
  ),
)

这个方案改动最小，直接针对单个Text组件生效，不需要额外引入字体资源。

方案2：全局统一字体 #

选择一款同时支持中英文、字形度量一致的字体（比如思源黑体、Roboto搭配Noto Sans CJK），把字体打包到项目后全局配置到App主题中，所有文本默认使用统一字体，也能从根源上避免行高不一致的问题：

MaterialApp(
  theme: ThemeData(
    fontFamily: '你引入的字体名称',
  ),
)

这个方案适合对全局字体样式有统一要求的项目，同时还能解决不同设备字体 fallback 导致的样式差异问题。

方案3：拆分TextSpan微调（特殊场景用） #

如果只有少量混排场景需要适配，也可以把中英文拆成单独的TextSpan，分别给中英文设置微调后的height参数，不过通用性不如前两个方案，仅作为备选。

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