Jetpack Compose 实现 @用户名提及用户和 #标签文字添加标签的文字效果

本文介绍 Android 开发时怎样通过 Jetpack Compose 实现类似微博和X中通过 @用户名 提及用户和 #标签文字 添加主题标签的文字效果？

Implement hashtags with Jetpack Compose in Android

以下就是如何使用 ClickableText 和 AnnotatedString 来实现上图中 @提及用户 和 #添加标签 文字效果：

这还可以用于实现评论功能中文字中提及@用户的效果

@Composable
fun HashTagsText() {
    val context = LocalContext.current
    val text = "Hello @itmob, Hello #Compose"

    val annotatedText = buildAnnotatedString {
        val regex = Regex("((?=[^\\w!])[#@][\\u4e00-\\u9fff\\w]+)")
        var lastIndex = 0
        regex.findAll(text).forEach { result ->
            append(text.substring(lastIndex, result.range.first))

            pushStringAnnotation(tag = "HASH_TAG", annotation = result.value)
            withStyle(
                style = SpanStyle(color = Color.Blue, textDecoration = TextDecoration.Underline)
            ) { append(result.value) }

            pop()
            lastIndex = result.range.last + 1
        }
        append(text.substring(lastIndex))
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            annotatedText.getStringAnnotations(
                tag = "HASH_TAG",
                start = offset,
                end = offset
            ).firstOrNull()?.let {
                val username = it.item
                Toast.makeText(context, "$username clicked", Toast.LENGTH_SHORT).show()
            }
        },
        style = TextStyle(fontSize = 18.sp)
    )
}