如何在Jetpack Compose中阻止Box内重叠组件的获焦与点击？

要实现顶部灰色遮罩显示时，底部按钮无法点击和获焦的需求，核心是让顶部遮罩层拦截所有输入事件（触摸、焦点等），阻止底层组件接收交互。以下是具体实现方案：

修正代码结构（关键前提） #

首先需要确保两个Column都放在同一个Box内部，这样才会形成重叠布局（原代码中第二个Column在Box外，是上下排列而非重叠）：

Box(modifier = Modifier.fillMaxSize()) {
    // 底部不可交互区域
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { /* 此点击事件不会触发 */ }) {
            Text(text = "Should NOT be clickable and focusable")
        }
    }

    // 顶部灰色遮罩+可交互按钮区域
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(SolidColor(Color.Gray), alpha = 0.8f)
            // 1. 拦截所有触摸事件
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        awaitPointerEvent()
                        consumeAllChanges()
                    }
                }
            }
            // 2. 拦截焦点事件
            .focusable(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { /* 正常触发点击 */ }) {
            Text(text = "Should be clickable and focusable")
        }
    }
}

方案说明 #

1. 触摸事件拦截：
   通过pointerInput代码块消费所有指针事件（点击、长按、拖拽等），底层组件将无法接收到任何触摸交互。
2. 焦点事件拦截：
   添加.focusable()让顶部遮罩层具备获焦能力，从而拦截焦点事件，底层按钮无法被选中或获焦。

动态控制遮罩显隐 #

如果遮罩是动态显示/隐藏的，可以用状态变量控制拦截修饰符的添加：

val isOverlayVisible by remember { mutableStateOf(true) }

Box(modifier = Modifier.fillMaxSize()) {
    // 底部区域代码不变...

    if (isOverlayVisible) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(SolidColor(Color.Gray), alpha = 0.8f)
                .then(
                    if (isOverlayVisible) {
                        Modifier
                            .pointerInput(Unit) {
                                awaitPointerEventScope {
                                    while (true) {
                                        awaitPointerEvent()
                                        consumeAllChanges()
                                    }
                                }
                            }
                            .focusable()
                    } else {
                        Modifier
                    }
                ),
            // 布局参数不变...
        ) {
            // 顶部按钮代码不变...
        }
    }
}

当isOverlayVisible设为false时，底部组件将恢复正常交互能力。

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