如何在 Jetpack Compose 中使透明颜色后面的区域不可交互/不可点击？

Question

考虑到这个充当“对话框”的可组合对象被绘制在根应用程序的前面：

我试图通过使其适合整个屏幕并使其根容器具有基本background(Color.Gray.copy(alpha = 0.5f)修饰符来模拟此对话框。

但是，即使它在前面，仍然可以与顶部按钮进行交互。

我的问题是，是否有一种“直接”的方式来“禁用”特定可组合树的交互，以避免将参数（例如“可点击”）传递给所有受影响的组合？

我想这样做：

• 从 alpha 颜色后面的区域拍摄“截图”；
• 将屏幕截图绘制为图像；
• 然后绘制前面的可组合（在我的示例中为“对话框”）。

但是，我不知道这有多么值得实施，甚至不知道如何拍摄那个“截图”。

此外，可能是一种处理此问题的方法，使用相关的东西来remember compostion state等。

Answer 1

你可以有一个 Box 消耗点击事件而没有点击反馈：

val interactionSource = remember { MutableInteractionSource() }
Box(
    modifier = modifier
        .background(
            color = MaterialTheme.colors.surface.copy(alpha = .4f)
        )
        .clickable(
            onClick = {
                if (dismissOnTouchOutside) {
                    onDismiss()
                }
            },
            interactionSource = interactionSource,
            indication = null
        ),
    contentAlignment = Alignment.Center,
) {
    // content here
}