android-jetpack-compose - Jetpack Compose Text 组件中的等宽数字

Question

我在我的 Jetpack Compose 应用程序中使用自定义字体，并希望将特定文本组件中的数字等宽。

使用标准的 Android TextView，这可以使用fontFeatureSetting="tnum"属性 ( https://stackoverflow.com/a/41143337/2521749 ) 来完成。

如何使用 Jetpack Compose 做到这一点？

Answer 1

buildAnnotatedString需要自定义字符串的不同部分。

如果需要对整体应用一些文本样式Text，可以使用style参数。

Text(
    text = String.format(Locale.ROOT, "%02d:%02d", mins, secs),
    style = LocalTextStyle.current.copy(fontFeatureSettings = "tnum"),
)

我在LocalTextStyle.current这里使用，这是 的默认样式Text，但是您可以将其替换为您需要的样式，例如您的主题排版之一：MaterialTheme.typography.h4

Answer 2

这可以使用带注释的字符串和SpanStyle来完成。

    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(fontFeatureSettings = "tnum")) {
                append(String.format(Locale.ROOT, "%02d:%02d", mins, secs))
            }
        }
    )

默认情况下，使用propotional-nums允许数字仅占用所需空间的设置显示数字。tabular-num或 tnum强制所有数字为给定的字体大小占用相同数量的空间。这允许您以类似等宽的格式呈现数字，这对于更新数字的视图或显示数字的类似表格的视图很有用。

结果是一个视图，无论其中显示的数字如何，都将占用相同的空间：