Jetpack Compose的TextField中的多個colors

Question

是否可以在 Jetpack Compose 的 TextField 中獲得不同的 colors？

類似於Text可與AnnotatedString組合的東西，但 TextField 不允許AnnotatedString作為輸入值。

可與 colors 組合的普通文本的圖像

Answer 1

你可以這樣做：

Text(buildAnnotatedString {
    withStyle(style = SpanStyle(color = Color.Blue)) {
        append("H")
    }
    append("ello ")

    withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
        append("W")
    }
    append("orld")
})

在文檔中查看更多信息：

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

Answer 2

您可以在TextField中使用VisualTransformation 。

TextField(
    value = text,
    onValueChange = { text = it },
    visualTransformation = ColorsTransformation()
)

在VisualTransformation中可以使用AnnotatedString顯示帶有多個 styles 的文本。

就像是：

class ColorsTransformation() : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return TransformedText(
            buildAnnotatedStringWithColors(text.toString()), 
            OffsetMapping.Identity)
    }
}

和：

fun buildAnnotatedStringWithColors(text:String): AnnotatedString{
    val words: List<String> = text.split("\\s+".toRegex())// splits by whitespace
    val colors = listOf(Color.Red,Color.Black,Color.Yellow,Color.Blue)
    var count = 0

    val builder = AnnotatedString.Builder()
    for (word in words) {
        builder.withStyle(style = SpanStyle(color = colors[count%4])) {
            append("$word ")
        }
        count ++
    }
    return builder.toAnnotatedString()
}