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

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

以下就是如何使用 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)
    )
}

• 创建 AnnotatedString 和 正则表达式检测和突出显示文本中的用户和标签。
• ClickableText 可组合项处理带注释的文本上的点击事件，点击标签时显示带有标签内容的Toast。

其他

Jetpack Compose 中的文字

Jetpack Compose 中拥有样式的文本

怎样处理 Jetpack Compose 中文本的长按选择和点击事件（如何在 Text 中添加超链接？）

在 Jetpack Compose 中怎样实现印章样式（弧形）的文字效果？

Jetpack Compose TextField VisualTransformation 视觉转换详解-高亮显示URL-格式化显示银行卡号码

Jetpack Compose 实现展开折叠显示更多文本的动画效果