Jetpack Compose 文本组件中的等宽数字

Question

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

对于标准 Android TextView，这可以使用 fontFeatureSetting="tnum" 属性 () 来完成。

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

Answer 1

这可以使用带注释的字符串和 SpanStyle.

来完成

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

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

结果是一个视图，无论其中显示的数字是多少，都将占用相同数量的 space：

Answer 2

需要

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

Jetpack Compose 文本组件中的等宽数字

Monospace numbers in the Jetpack Compose Text component

android-jetpack-compose

android-jetpack-compose-text