如何在 jetpack compose 中突出顯示文本的特定單詞？

Question

我想知道如何在 Jetpack Compose 中突出顯示文本的特定部分。 我這樣試過Html.fromHtml()

Text(text = Html.fromHtml(" <font color='red'> Hello </font> World").toString())

但它沒有用。 有什么辦法可以在撰寫中做到這一點？

Answer 1

使用1.0.0-beta06 ，您可以使用AnnotatedString顯示具有多個 styles 的文本。

就像是：

Text(buildAnnotatedString {
    withStyle(style = SpanStyle(color = Color.Red)) {
        append("Hello")
    }
    append(" World ")
})

Answer 2

檢查下面的 function。 這里的段落是您的字符串源，而 searchQuery 是您要突出顯示的特定文本。

這為您提供了動態 state 用於文本和搜索亮點。

@Composable
    fun getData(): StateFlow<AnnotatedString?> {

        val span = SpanStyle(
            color = MaterialTheme.colorScheme.onPrimaryContainer,
            fontWeight = FontWeight.SemiBold,
            background = MaterialTheme.colorScheme.primaryContainer
        )

        return combine(paragraph, searchQuery) { text, query ->
            buildAnnotatedString {
                var start = 0
                while (text.indexOf(query, start, ignoreCase = true) != -1 && query.isNotBlank()) {
                    val firstIndex = text.indexOf(query, start, true)
                    val end = firstIndex + query.length
                    append(text.substring(start, firstIndex))
                    withStyle(style = span) {
                        append(text.substring(firstIndex, end))
                    }
                    start = end
                }
                append(text.substring(start, text.length))
                toAnnotatedString()
            }
        }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), null)
    }

Answer 3

您可以將AnnotatedString用於 append 每個單詞/部分具有自己的樣式，或者在任何索引處添加不同的樣式，如果您使用的是字符串資源，這非常有用。

對於 hello world 示例，您可以構建如下內容：

val annotatedString = buildAnnotatedString {
    val str = "Hello World" // or stringResource(id = R.string.hello_world)
    val boldStr = "Hello" // or stringResource(id = R.string.hello)
    val startIndex = str.indexOf(boldStr)
    val endIndex = startIndex + boldStr.length
    append(str)
    addStyle(style = SpanStyle(color = Color.Red), start = startIndex, end = endIndex)
}
Text(
    text = annotatedString,
)

以這種方式使用addStyle可以讓我們做一些有趣的事情，比如將多個 styles 添加到同一文本

val annotatedString = buildAnnotatedString {
    val str = "Hello Wonderful World" // or stringResource(id = R.string.hello_world)
    val boldStr = "Wonderful World" // or stringResource(id = R.string.world)
    val startIndex = str.indexOf(boldStr)
    val endIndex = startIndex + boldStr.length
    append(str)
    addStyle(style = SpanStyle(color = Color.Red), start = startIndex, end = endIndex)

    val italicsStr = "Wonderful"
    val italicsStartIndex = str.indexOf(italicsStr)
    val italicsEndIndex = startIndex + italicsStr.length
    addStyle(style = SpanStyle(fontStyle = FontStyle.Italic), start = italicsStartIndex, end = italicsEndIndex)
}
Text(
    text = annotatedString,
    style = TextStyle(fontWeight = FontWeight.Bold),
    color = Color.Blue,
)