如何在Jetpack Compose的Text组件中实现数字等宽显示

Jetpack Compose 的Text组件原生支持OpenType字体特性配置，你直接通过fontFeatureSettings参数传入"tnum"即可实现和原生TextView一致的等宽数字效果。

局部单独配置 #

只需要给指定的Text组件添加参数即可，适合仅部分场景（如倒计时、金额显示）需要等宽数字的情况：

Text(
    text = "01:23:45",
    // 开启等宽数字特性
    fontFeatureSettings = "tnum",
    // 你原有配置的其他样式，比如自定义字体、字号等
    fontSize = 32.sp,
    fontFamily = yourCustomFontFamily
)

全局统一配置 #

如果需要所有文本都默认使用等宽数字，可以在项目主题的Typography中统一给对应TextStyle添加配置：

val AppTypography = Typography(
    // 给所有用到的TextStyle都加上fontFeatureSettings配置
    bodyLarge = TextStyle(
        fontFamily = yourCustomFontFamily,
        fontSize = 16.sp,
        fontWeight = FontWeight.Normal,
        fontFeatureSettings = "tnum"
    ),
    titleLarge = TextStyle(
        fontFamily = yourCustomFontFamily,
        fontSize = 24.sp,
        fontWeight = FontWeight.Medium,
        fontFeatureSettings = "tnum"
    )
)

// 然后在你的主题中引用该Typography即可
@Composable
fun CustomAppTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        typography = AppTypography,
        content = content
    )
}

注意事项 #

• 请确保你使用的自定义字体本身支持tnum（表格数字）OpenType特性，否则配置不会生效，目前绝大多数正规开源字体、商用字体都支持该特性
• 该配置仅会修改数字的宽度为统一值，不会影响其他文字、符号的渲染效果

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