如何使用 Jetpack Compose 在同一文本視圖中顯示多個顏色文本？

Question

我想在同一個 Text() 組件中以多種顏色/樣式顯示文本。 如何使用 Jetpack Compose 實現這一目標？

樣本：

Answer 1

這可以使用 Compose 中的 AnnotatedString 輕松實現。 可以創建一個自定義組合，它將兩個 colors 和字符串作為參數，如下所示。

 @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)

您可以在 string 的不同部分添加更多定制和不同的 styles。

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