Jetpack Compose中ClickableText如何按需消费点击透传父级事件

自带ClickableText的问题根源是它内部直接给文本挂载了全区域的clickable修饰符，默认会吞掉整个文本范围内的所有触摸事件。你之前手动透传onClick的方案只是在文本组件里手动调用了父组件的回调，事件本身还是被文本消费了，父组件根本收不到完整的触摸事件流，自然出不来涟漪、按下状态这类依赖完整触摸流程的效果。

要实现「只有点到URL注解片段才消费点击，其余区域事件透传父布局」的效果，不要直接用封装好的ClickableText，基于BasicText自定义手势判断逻辑即可，核心思路是在手势检测阶段先判断点击位置是否命中可点击注解，只有命中的时候才消费事件，否则直接放行事件给父布局处理。

实现代码 #

@Composable
private fun PartiallyClickableText(
    annotatedString: AnnotatedString,
    modifier: Modifier = Modifier,
    onUrlClick: (String) -> Unit = {},
) {
    val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }

    BasicText(
        text = annotatedString,
        modifier = modifier
            .pointerInput(annotatedString) {
                detectTapGestures(
                    onPress = { pressOffset ->
                        val currentLayout = layoutResult.value ?: return@detectTapGestures
                        // 拿到点击位置对应的文本字符偏移
                        val tapOffset = currentLayout.getOffsetForPosition(pressOffset)
                        // 匹配点击位置的URL注解
                        val targetAnnotation = annotatedString.getStringAnnotations(
                            tag = "URL",
                            start = tapOffset,
                            end = tapOffset
                        ).firstOrNull()

                        if (targetAnnotation != null) {
                            // 命中URL，等待点击抬起后触发回调，消费本次事件
                            if (tryAwaitRelease()) {
                                onUrlClick(targetAnnotation.item)
                            }
                        }
                        // 未命中URL时直接返回，不消费事件，事件自动透传给父布局
                    }
                )
            },
        onTextLayout = { layoutResult.value = it }
    )
}

使用方式 #

直接替换原有ClickableText即可，父布局代码不需要做任何修改：

@Composable
fun MyItem(
   ...
   onClick: () -> Unit = {},
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onClick() } // 原有点击逻辑、涟漪效果完全保留
    ) {
        ...
        PartiallyClickableText(
            annotatedString = yourAnnotatedContent,
            onUrlClick = { clickedUrl ->
                Timber.d("URL Clicked: $clickedUrl")
                // 处理URL跳转逻辑
            }
        )
    }
}

方案效果 #

• 点击URL片段：正常触发URL点击回调，事件被文本消费，不会触发父布局的点击逻辑
• 点击非URL文本区域：事件完全透传给父布局，父布局的按下状态、涟漪效果、点击回调和点击Row其他空白区域的表现完全一致
• 不需要手动将父布局的点击回调传入文本组件，组件之间无额外耦合

如果需要给URL片段单独加点击水波纹、点击变色这类交互效果，可以在命中URL注解时，单独绘制对应文本范围的交互指示即可按需扩展。

内容的提问来源于stack exchange，提问作者Buddy Christ