Compose Multiplatform中如何将Text组件的行高设置为与字体大小相等？

嘿，这个问题我太有共鸣了！在Compose Multiplatform里用Text组件的时候，你是不是也碰到过这种糟心的情况：明明给字体设了12.sp的大小，实际渲染出来的Text组件高度却有16px？算下来差不多是字体大小的1.333倍，想把行高缩到和字体一样大，结果手动设置lineHeight完全不生效？

问题出在哪？ #

其实这是因为Compose的Text组件默认会根据字体的**度量信息（font metrics）**计算出一个最小高度，哪怕你手动指定了lineHeight，如果这个值小于组件的默认最小高度，就会被直接忽略。比如你用12.sp的字体时，组件的最小高度是16px，这时候你把lineHeight设成12.sp根本起不了作用，必须设到17.sp以上才会看到行高变化。

就像你尝试的这段代码，看起来设了和字体一样大的行高，但实际上完全没效果：

Text(
    text = name,
    color = theme.colors.text.important(),
    fontFamily = theme.fontFamily,
    fontSize = 12.sp,
    lineHeight = 12.sp,
    fontWeight = FontWeight.Medium
)

怎么解决？ #

要真正把行高缩到和字体大小一致，你需要两步操作：

1. 关闭字体默认内边距：Text组件有个includeFontPadding参数，默认是true，它会给字体加上上下额外的内边距来容纳一些特殊的字形（比如带上下标的字符）。把它设为false就能去掉这些冗余的高度。
2. 设置lineHeight与fontSize相等：这时候再把lineHeight设成和fontSize一样的值，就能生效了。

修改后的代码是这样的：

Text(
    text = name,
    color = theme.colors.text.important(),
    fontFamily = theme.fontFamily,
    fontSize = 12.sp,
    lineHeight = 12.sp,
    fontWeight = FontWeight.Medium,
    includeFontPadding = false
)

小提醒 #

不过要注意，不同字体的度量信息可能不一样，有些字体即使关了includeFontPadding，还是会有一点点高度差。这时候你可以微调lineHeight的值（比如设成11.8.sp或者12.2.sp），根据实际渲染效果来调整到最贴合的状态。

内容来源于stack exchange