Jetpack Compose中如何让子元素拦截点击事件以阻止父元素响应？

这个需求我之前做项目时刚好碰到过，其实在Compose里实现起来很简单，核心就是让子元素把点击、悬停这类指针事件全部消费掉，不让它们“冒泡”传递给父元素就行。

先看你原来的代码，子Box没有任何指针事件处理逻辑，所以点击红色区域时，事件会一路往上传到父Box，触发父元素的点击回调。要解决这个问题，我们只需要给子Box添加能消费事件的Modifier就行，分两种情况给你说：

情况1：子元素不需要自己处理点击事件，只是单纯拦截 #

如果红色盒子本身不需要响应点击，只是要挡住父元素的点击和悬停效果，你可以给子Box加上pointerInput来消费所有指针事件：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .background(Color.Blue)
        .size(400.dp)
        .clickable { println("Click detected!") }
) {
    Box(
        modifier = Modifier
            .background(Color.Red)
            .size(150.dp)
            // 消费所有指针事件，阻止父元素接收
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent()
                        event.consume() // 关键：消费事件，不让它往上传
                    }
                }
            }
    )
}

或者更简单的方式，用空实现的clickable，同时去掉默认的点击反馈（避免子盒子出现不必要的波纹）：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .background(Color.Blue)
        .size(400.dp)
        .clickable { println("Click detected!") }
) {
    Box(
        modifier = Modifier
            .background(Color.Red)
            .size(150.dp)
            .clickable(
                onClick = {}, // 空实现，只用来消费事件
                indication = null, // 去掉默认的点击波纹
                interactionSource = remember { MutableInteractionSource() }
            )
    )
}

情况2：子元素需要自己处理点击事件 #

如果红色盒子本身要响应点击，那更简单了，直接给子Box加正常的clickable逻辑就行——Compose中只要子元素处理了点击事件，就会自动消费掉，父元素不会再收到这个事件：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .background(Color.Blue)
        .size(400.dp)
        .clickable { println("Click detected!") }
) {
    Box(
        modifier = Modifier
            .background(Color.Red)
            .size(150.dp)
            .clickable { 
                // 这里写子元素自己的点击逻辑
                println("Red box clicked!") 
            }
    )
}

原理说明 #

Compose的指针事件传递是从子元素到父元素的顺序，当某个元素调用了event.consume()（或者通过clickable这类Modifier隐式消费了事件），后续的父元素就不会再收到这个事件了。这样一来，点击红色区域时，事件被子元素消费，父Box完全不会感知到；悬停时也是一样，子元素会处理悬停事件，父Box的hover效果就不会触发了。

内容来源于stack exchange