Jetpack Compose中如何让透明色后方区域不可交互/点击

核心原因 #

半透明遮罩盖在顶层但下层按钮仍可点击的问题，本质是只给根容器配置了半透明背景，没有让该容器消费触摸事件——Compose的手势分发逻辑中，只有组件主动消费了手势事件，事件才不会继续向下层传递。

零侵入解决方法（无需修改任何下层组件代码） #

不需要给所有受影响的可组合项传递交互控制参数，直接给占满全屏的对话框根容器添加事件消费逻辑即可：

• 基础场景（拦截点击事件）：给根容器修饰符添加无涟漪、无交互源的空点击监听，代码如下：

Modifier.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = null,
    onClick = {}
)

这个配置会让遮罩层吃掉所有落在自身区域的点击事件，下层组件完全无法接收到点击信号。如果需要实现“点击遮罩关闭弹窗”的常规效果，只需要把空的onClick实现替换为弹窗关闭逻辑即可。

• 全手势拦截场景（拦截点击、滑动、拖拽等所有手势）：如果弹窗下层有可滑动列表、拖拽组件，用指针输入修饰符在手势分发初始阶段直接消费所有事件：

Modifier.pointerInput(Unit) {
    awaitPointerEventScope {
        while (true) {
            awaitPointerEvent(PointerEventPass.Initial)
                .changes
                .forEach { it.consume() }
        }
    }
}

这段代码会在所有手势事件分发给下层组件之前就将事件标记为已消费，所有下层交互组件都会自动失去响应。

其他思路的可行性说明 #

• 截图叠层方案没有实现价值：Compose中对特定布局区域截图需要调用位图绘制API，额外计算组件位置，不仅性能开销高，还需要处理界面重组、内容刷新时的截图同步问题，极易出现显示不同步的bug，属于为了绕开事件分发问题走的弯路，完全没必要采用。
• 基于remember状态全局控制的方案侵入性过高：虽然可以通过组合记忆存储弹窗显示的全局状态，再给每个可交互组件加状态判断来禁用交互，但项目中组件数量多的时候维护成本极高，远不如直接在遮罩层拦截事件的方案简洁高效。

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