CircularProgressIndicator激活时如何禁用页面背景交互？

核心思路是在显示进度条时新增一层全屏事件拦截层，消费所有输入事件，避免事件透传到下层页面内容，不需要修改下层原有控件的交互逻辑。

正确实现代码 #

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    // 此处放置页面原有内容
    // ...

    if (anyState) {
        // 全屏事件拦截层
        Box(
            modifier = Modifier
                .fillMaxSize()
                // 可选：添加半透明背景强化加载状态感知，不需要可删除该行
                .background(Color.Black.copy(alpha = 0.3f))
                // 消费所有点击事件，拦截向下传递
                .clickable(enabled = true, onClick = {})
                // 可选：需要拦截滑动等全部触摸事件可替换为下面的写法
                // .pointerInput(Unit) {
                //     awaitEachGesture {
                //         // 消费所有触摸事件不向下传递
                //         awaitFirstDown(requireUnconsumed = false)
                //     }
                // }
        )
        // 进度条绘制在拦截层上方
        MaterialCircularProgressIndicator()
    }
}

可选扩展配置 #

• 禁用返回键响应：在if(anyState)代码块内添加BackHandler(enabled = true) {}即可拦截返回键操作。
• 自定义遮罩样式：可调整background参数修改遮罩颜色、透明度，不需要遮罩视觉效果直接删除background修饰符即可，不影响事件拦截功能。

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