Jetpack Compose：如何让子组件阻止父组件点击事件触发？

先看这个场景：

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            Timber.d("parent click")
        }
) {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Red)
    ) {
        // children
    }

    // ...
}

点击红色子Box时，明明它在父组件上方，父组件的点击事件还是会被触发——这和View系统的默认行为不一样，显得有点反直觉。给红色Box加个空逻辑的clickable虽然能解决，但总觉得有点多余。

最优解决方案：用pointerInput消费点击事件 #

不需要额外加clickable，直接用Compose底层的指针事件API就能搞定：

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            Timber.d("parent click")
        }
) {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Red)
            .pointerInput(Unit) {
                detectTapGestures {
                    // 无需写任何业务逻辑，只要调用这句就能消费事件
                    consumeAllChanges()
                }
            }
    ) {
        // children
    }

    // ...
}

原理很简单：pointerInput是Compose处理指针事件的基础API，detectTapGestures专门监听点击动作，consumeAllChanges()会把当前点击事件完全“吃掉”，不会再往父组件传递，完美达到阻止父组件响应的效果。

如果需要拦截所有类型的指针事件（不止点击），可以用更底层的写法：

.pointerInput(Unit) {
    awaitPointerEventScope {
        while (true) {
            val event = awaitPointerEvent()
            event.changes.forEach { it.consume() }
        }
    }
}

这种方式会拦截所有触摸事件，适合需要完全屏蔽子区域交互的场景。

为什么默认行为是这样？ #

Compose的事件传递逻辑和View系统不同：只有当组件带有clickable、toggleable这类明确标记为“可交互”的修饰符时，才会参与点击事件的竞争。没有这些修饰符的组件，会直接把事件透传给父组件——这就是为什么红色Box默认不会阻止父组件点击的原因。

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