如何阻止Jetpack Compose可组合项透传点击或滚动事件

问题描述 #

我有两个Box可组合项：一个占据全屏的红色Box，以及一个zIndex更高、显示在红色Box上方的绿色Box。当前问题是：点击绿色Box区域时，底层红色Box也会检测到点击、滚动等交互事件。我的需求是让绿色Box阻止交互事件透传到底层红色Box，注意不能设置底层可组合项为不可点击或不可滚动。

原代码：

class TEST : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            KdoumaScoreTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { cc ->
                    cc // 避免未使用inner padding的错误

                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.Red)
                            .clickable {
                                Toast
                                    .makeText(this, "shouldn't happen", Toast.LENGTH_SHORT)
                                    .show()
                            }
                    )

                    Box(
                        modifier = Modifier
                            .fillMaxHeight(0.5f)
                            .fillMaxWidth(0.6f)
                            .background(Color.Green)
                            .zIndex(100f)
                    )
                }
            }
        }
    }
}

解决方法 #

只需给上层绿色Box添加能消费触摸事件的修饰符，拦截事件使其无法透传到底层。以下是两种可行方案：

方案1：使用底层pointerInput拦截所有触摸事件 #

通过pointerInputAPI直接消费所有触摸事件，适用于需要阻止所有类型交互（点击、滑动等）的场景：

class TEST : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            KdoumaScoreTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { cc ->
                    cc

                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.Red)
                            .clickable {
                                Toast
                                    .makeText(this, "不该触发", Toast.LENGTH_SHORT)
                                    .show()
                            }
                    )

                    Box(
                        modifier = Modifier
                            .fillMaxHeight(0.5f)
                            .fillMaxWidth(0.6f)
                            .background(Color.Green)
                            .zIndex(100f)
                            // 拦截并消费所有触摸事件
                            .pointerInput(Unit) {
                                awaitPointerEventScope {
                                    while (true) {
                                        awaitPointerEvent()
                                    }
                                }
                            }
                    )
                }
            }
        }
    }
}

方案2：使用空实现的clickable修饰符 #

如果仅需要阻止点击事件，空的clickable修饰符更简洁，它会自动消费点击事件：

Box(
    modifier = Modifier
        .fillMaxHeight(0.5f)
        .fillMaxWidth(0.6f)
        .background(Color.Green)
        .zIndex(100f)
        .clickable {} // 空回调消费点击事件，阻止透传
)

原理说明 #

Compose的事件传递是从上层组件向下层组件传递的，只要上层组件消费了事件，底层组件就无法再接收到对应事件。上述两种方式都是让绿色Box成为事件的消费端，从而切断事件的传递链路。

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