Jetpack Compose Text 组件中的等宽数字答案

【问题标题】：Monospace numbers in the Jetpack Compose Text componentJetpack Compose Text 组件中的等宽数字
【发布时间】：2021-08-31 00:49:45
【问题描述】：

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

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

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

【问题讨论】：

标签： android-jetpack-compose android-jetpack-compose-text

【解决方案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

【讨论】：

是的，这样更好。谢谢菲利普！

【解决方案2】：

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

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

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

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

【讨论】：