如何使用 Jetpack Compose 在同一文本视图中显示多种颜色文本？

Question

我想在同一个 Text() 组件中以多种颜色/样式显示文本。我如何使用 Jetpack Compose 实现这一目标？

样本：

Answer 1

这可以使用 Compose 中的 AnnotatedString 轻松实现。可以创建一个自定义可组合项，它将两种颜色和字符串作为参数，如下所示。

 @Composable
 fun MultiStyleText(text1: String, color1: Color, text2: String, color2: Color) {
        Text(buildAnnotatedString {
            withStyle(style = SpanStyle(color = color1)) {
                append(text1)
            }
            withStyle(style = SpanStyle(color = color2)) {
                append(text2)
            }
        })
    }

然后可以在您的代码中使用此可组合项，如下所示。

  MultiColorText("OS Version: ", Color.DarkGray, "Android 12", Color.Blue)

您可以向字符串的不同部分添加更多自定义和不同的样式。

参考： https: //developer.android.com/jetpack/compose/text#multiple-styles