如何在 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
}