如何将子ClickableText的指针事件传递给父Composable？

问题根源在于ClickableText内部会无条件消费所有点击事件，不管是否匹配到注解内容，导致父组件的combinedClickable无法接收到事件。要实现“仅点击非URL区域时触发父组件事件”的需求，我们可以放弃ClickableText的默认实现，改用BasicText配合自定义手势逻辑，精确控制事件是否消费。

实现步骤 #

• 用BasicText替代ClickableText，它不会默认消费点击事件，便于我们自定义处理逻辑。
• 通过onTextLayout获取文本布局结果，将点击坐标转换为对应的文本偏移量。
• 在自定义手势中判断点击位置是否存在URL注解：
  • 若存在，处理URL点击并消费事件；
  • 若不存在，不消费事件，让事件冒泡到父组件。

修改后的完整代码 #

@OptIn(ExperimentalFoundationApi::class)
@DevicePreviews
@Composable
fun Preview() {
    val text = remember { mutableStateOf("") }
    val annotatedString = annotatedString("Hello, https://google.com world!")
    val textLayoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }

    Column(modifier = Modifier
        .combinedClickable(onLongClick = {
            text.value = "Long clicked parent"
        }, onClick = {
            text.value = "Clicked parent"
        })
    ) {
        Text(text.value)
        BasicText(
            text = annotatedString,
            modifier = Modifier
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = { offset ->
                            textLayoutResult.value?.let { layoutResult ->
                                val position = layoutResult.getPositionForOffset(offset)
                                val urlAnnotation = annotatedString.getStringAnnotations(
                                    tag = "URL",
                                    start = position.offset,
                                    end = position.offset
                                ).firstOrNull()

                                if (urlAnnotation != null) {
                                    text.value = "Clicked child"
                                }
                                // 无URL注解时不消费事件，父组件onClick自动触发
                            }
                        }
                    )
                },
            onTextLayout = { textLayoutResult.value = it },
            style = TextStyle(fontSize = 16.sp)
        )
    }
}

fun annotatedString(text: String): AnnotatedString = buildAnnotatedString {
    val urlRegex = "(https?://[\\w\\-._~:/?#\\[\\]@!$&'()*+,;=]+)".toRegex()
    val matches = urlRegex.findAll(text)

    var lastIndex = 0
    for (match in matches) {
        withStyle(style = SpanStyle(color = Color.Black)) {
            append(text.substring(lastIndex, match.range.first))
        }
        pushStringAnnotation(tag = "URL", annotation = match.value)
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                textDecoration = TextDecoration.Underline,
                fontSize = 16.sp
            )
        ) {
            append(match.value)
        }
        pop()
        lastIndex = match.range.last + 1
    }
    withStyle(style = SpanStyle(color = Color.Black)) {
        append(text.substring(lastIndex, text.length))
    }
}

关键说明 #

• BasicText的优势是不强制消费点击事件，让我们能灵活控制事件流向。
• 通过TextLayoutResult将屏幕坐标转换为文本偏移量，是判断点击位置是否命中URL的核心。
• 长按事件无需额外处理，因为自定义手势只拦截了点击事件，长按事件会自然传递到父组件的combinedClickable。

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