Jetpack Compose中父组件如何拦截点击手势（是否消费事件）？

一、父组件拦截点击事件（子组件无响应） #

若要让父组件优先拦截并消费点击事件，阻止子组件接收，可使用Compose的指针事件拦截机制：

方法1：使用interceptingPointerInput #

interceptingPointerInput会在子组件之前处理指针事件并默认消费，子组件无法接收后续事件：

Box(
    modifier = Modifier
        .interceptingPointerInput(Unit) {
            detectTapGestures(onTap = {
                println("TAP in parent Box")
            })
        }
) {
    Box(
        modifier = Modifier
            .pointerInput(Unit) {
                detectTapGestures(onTap = {
                    println("TAP in child Box")
                })
            }
    ) {}
}

方法2：手动消费事件变更 #

通过awaitPointerEventScope获取事件后，主动消费所有变更以阻断传递：

Box(
    modifier = Modifier
        .pointerInput(Unit) {
            awaitPointerEventScope {
                val event = awaitPointerEvent()
                if (event.type == PointerEventType.Release) {
                    println("TAP in parent Box")
                    // 消费事件，阻止传递到子组件
                    event.changes.forEach { it.consumeAllChanges() }
                }
            }
        }
) {
    // 子组件代码不变
}

二、不消费事件，父子组件均响应点击 #

默认detectTapGestures会自动消费事件，导致父组件无法触发回调。需自定义手势检测逻辑，不调用consumeAllChanges()以保留事件传递：

Box(
    modifier = Modifier
        .pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    val event = awaitPointerEvent()
                    if (event.type == PointerEventType.Release) {
                        println("TAP in parent Box")
                        // 不消费事件，允许继续传递到子组件
                    }
                    waitForAllChanges()
                }
            }
        }
) {
    Box(
        modifier = Modifier
            .pointerInput(Unit) {
                detectTapGestures(onTap = {
                    println("TAP in child Box")
                })
            }
    ) {}
}

点击后，父组件回调先触发，随后子组件回调也会执行。若子组件也需保留事件传递，只需将其detectTapGestures替换为相同的自定义逻辑即可。

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