如何在Jetpack Compose中同时实现可选中与可点击文本？

核心问题是SelectionContainer会优先拦截触摸事件，导致ClickableText中标记的可点击注解无法触发点击。要基于现有API解决，关键是让SelectionContainer在检测到点击区域是可点击注解时，放弃事件拦截，交给ClickableText处理。

方案一：自定义SelectionContainer处理事件判断 #

通过继承SelectionContainer并重写事件拦截逻辑，判断点击位置是否属于可点击注解区域，以此决定是否拦截事件。

1. 构建带可点击注解的AnnotatedString #

val annotatedText = buildAnnotatedString {
    append("Date: 99/99/9999\n")
    append("Count: 99999\n\n")
    
    // 标记max对应的可点击区域
    append("    max: ")
    val maxStart = length
    append("xxxx")
    addStringAnnotation(
        tag = "clickable",
        annotation = "max",
        start = maxStart,
        end = maxStart + 4
    )
    
    // 标记min对应的可点击区域
    append("\n    min: ")
    val minStart = length
    append("xxxx")
    addStringAnnotation(
        tag = "clickable",
        annotation = "min",
        start = minStart,
        end = minStart + 4
    )
    
    // 标记mean对应的可点击区域
    append("\n    mean: ")
    val meanStart = length
    append("xxxx")
    addStringAnnotation(
        tag = "clickable",
        annotation = "mean",
        start = meanStart,
        end = meanStart + 4
    )
}

2. 自定义ClickableAwareSelectionContainer #

class ClickableAwareSelectionContainer(
    private val annotatedString: AnnotatedString,
    content: @Composable () -> Unit
) : SelectionContainer(content) {
    override fun SelectionContainerScope.handleInterceptTouchEvent(
        motionEvent: MotionEvent
    ): Boolean {
        // 获取点击位置对应的文本偏移量
        val clickOffset = layoutResult?.getOffsetForPosition(
            Offset(motionEvent.x, motionEvent.y)
        ) ?: return super.handleInterceptTouchEvent(motionEvent)
        
        // 检查该位置是否存在可点击注解
        val hasClickableTag = annotatedString.getStringAnnotations(
            tag = "clickable",
            start = clickOffset,
            end = clickOffset
        ).isNotEmpty()
        
        return if (hasClickableTag) {
            // 不拦截事件，交给ClickableText处理点击
            false
        } else {
            // 正常拦截，处理文本选中
            super.handleInterceptTouchEvent(motionEvent)
        }
    }
}

3. 组合使用组件 #

ClickableAwareSelectionContainer(annotatedText) {
    ClickableText(
        text = annotatedText,
        style = TextStyle(fontSize = 16.sp)
    ) { offset ->
        // 处理可点击区域的点击逻辑
        annotatedText.getStringAnnotations(tag = "clickable", start = offset, end = offset)
            .firstOrNull()?.let { annotation ->
                when (annotation.item) {
                    "max" -> {
                        // 执行max对应的操作：弹窗、导航等
                    }
                    "min" -> {
                        // 执行min对应的操作
                    }
                    "mean" -> {
                        // 执行mean对应的操作
                    }
                }
            }
    }
}

方案二：使用InlineTextContent嵌入可点击组件 #

如果不想自定义SelectionContainer，可以用InlineTextContent在文本中嵌入独立的可点击组件，这种方式天然避免事件冲突，因为嵌入组件的点击事件由自身处理，不影响文本选中。

实现示例 #

// 定义内嵌的可点击内容
val inlineContent = mapOf(
    "clickable_max" to InlineTextContent(
        Placeholder(
            width = WrapContent,
            height = WrapContent,
            placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
        )
    ) {
        Text(
            text = "xxxx",
            modifier = Modifier
                .clickable { /* 处理max点击逻辑 */ }
                .padding(horizontal = 4.dp),
            color = Color.Blue,
            style = TextStyle(fontSize = 16.sp)
        )
    },
    "clickable_min" to InlineTextContent(
        Placeholder(
            width = WrapContent,
            height = WrapContent,
            placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
        )
    ) {
        Text(
            text = "xxxx",
            modifier = Modifier
                .clickable { /* 处理min点击逻辑 */ }
                .padding(horizontal = 4.dp),
            color = Color.Blue,
            style = TextStyle(fontSize = 16.sp)
        )
    },
    "clickable_mean" to InlineTextContent(
        Placeholder(
            width = WrapContent,
            height = WrapContent,
            placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
        )
    ) {
        Text(
            text = "xxxx",
            modifier = Modifier
                .clickable { /* 处理mean点击逻辑 */ }
                .padding(horizontal = 4.dp),
            color = Color.Blue,
            style = TextStyle(fontSize = 16.sp)
        )
    }
)

// 构建包含内嵌内容的AnnotatedString
val annotatedText = buildAnnotatedString {
    append("Date: 99/99/9999\n")
    append("Count: 99999\n\n")
    append("    max: ")
    appendInlineContent("clickable_max")
    append("\n    min: ")
    appendInlineContent("clickable_min")
    append("\n    mean: ")
    appendInlineContent("clickable_mean")
}

// 直接在SelectionContainer中使用Text组件
SelectionContainer {
    Text(
        text = annotatedText,
        style = TextStyle(fontSize = 16.sp),
        inlineContent = inlineContent
    )
}

这个方案的优势是代码更简洁，无需处理事件拦截逻辑，同时可点击组件的样式和交互能更灵活定制。

内容的提问来源于stack exchange，提问作者Lucas Sousa