如何在Jetpack Compose中实现可点击的数字标注脚注文本

在Jetpack Compose里，我们可以用AnnotatedString替代原生的SpannableStringBuilder，结合ClickableText组件来实现高亮可点击的数字脚注效果，具体步骤如下：

1. 编写文本转换函数，生成带样式和点击注解的AnnotatedString #

先实现一个工具函数，接收原始文本，通过正则匹配出所有数字片段，给这些片段添加高亮样式和专属的点击注解，最后拼接成完整的AnnotatedString：

fun createFootnoteAnnotatedString(originalText: String): AnnotatedString {
    val numberRegex = Regex("\\d+") // 匹配所有连续数字
    val builder = AnnotatedString.Builder()
    
    var currentIndex = 0
    // 遍历所有匹配到的数字片段
    numberRegex.findAll(originalText).forEach { matchResult ->
        // 添加匹配片段之前的普通文本
        builder.append(originalText.substring(currentIndex, matchResult.range.first))
        
        // 给数字片段添加高亮样式和点击注解
        val numberText = matchResult.value
        builder.pushStyle(
            SpanStyle(
                background = Color(0xFFFFF3CD), // 浅黄色高亮背景
                color = Color(0xFFB74093) // 自定义文字颜色
            )
        )
        // 添加点击注解，tag用于区分类型，data存数字内容
        builder.pushStringAnnotation(
            tag = "footnote",
            annotation = numberText
        )
        builder.append(numberText)
        // 弹出样式和注解
        builder.pop()
        builder.pop()
        
        currentIndex = matchResult.range.last + 1
    }
    // 添加最后一段普通文本
    builder.append(originalText.substring(currentIndex))
    
    return builder.toAnnotatedString()
}

2. 使用ClickableText渲染并处理点击事件 #

用ClickableText组件加载上面生成的AnnotatedString，并在点击时识别对应的数字脚注，执行后续逻辑：

@Composable
fun FootnoteTextDemo() {
    val sampleText = "这是一段包含数字123和456的测试文本，点击数字可以查看脚注789"
    val annotatedText = remember { createFootnoteAnnotatedString(sampleText) }
    
    ClickableText(
        text = annotatedText,
        style = TextStyle(fontSize = 16.sp),
        onClick = { offset ->
            // 根据点击位置获取对应的脚注注解
            annotatedText.getStringAnnotations(tag = "footnote", start = offset, end = offset)
                .firstOrNull()?.let { annotation ->
                    // 这里替换成你的脚注逻辑，比如弹出提示、跳转至脚注区域等
                    Toast.makeText(
                        LocalContext.current,
                        "查看脚注：${annotation.item}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
        }
    )
}

自定义扩展 #

• 如果需要匹配特定格式的数字（如上标数字、带括号的数字等），可以调整numberRegex的规则，比如Regex("\\[\\d+\\]")匹配[1]这种格式的脚注标记。
• 高亮样式可以通过SpanStyle自定义，比如修改背景色、文字大小、下划线等。
• 点击后的逻辑可以替换为导航到页面底部的脚注区域、展示弹窗等实际业务需求。

内容的提问来源于stack exchange，提问作者Raka M.A