Android Jetpack Compose实现Dialog背景模糊但内容不模糊

需求：为Dialog添加模糊背景，但Dialog内部内容保持正常不模糊。

现有代码：

@Composable
fun PremiumDialog(
    onDismissRequest: () -> Unit,
    onConfirm: () -> Unit
) {
    var checked by rememberSaveable { mutableStateOf(true) }

    Dialog(
        onDismissRequest = onDismissRequest, properties = DialogProperties(
            dismissOnBackPress = true, usePlatformDefaultWidth = false
        )
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.BottomCenter

        ) {
            Card(
                modifier = Modifier
                    .fillMaxWidth() 
                    .padding(
                        top = 20.dp, end = 20.dp, start = 20.dp, bottom = 18.dp
                    )
                    .background(Color.Transparent),
                backgroundColor = DialogBackgroundColor,
                shape = DefaultDialogRoundedCorners, 
                border = BorderStroke(1.dp, Color.White.copy(0.20f)),
                elevation = 0.dp
            ) {
                // Dialog内容区域
            }
        }
    }
}

尝试过的方案：使用Cloudy库或直接调用Modifier.blur()，未达到预期效果，推测实现逻辑与Toolbar背景模糊类似。

可以实现，核心思路是在Dialog根容器中先添加全屏模糊背景层，再在其上方放置Dialog内容Card，让背景模糊、内容保持清晰。具体实现如下：

修改后的完整代码：

@Composable
fun PremiumDialog(
    onDismissRequest: () -> Unit,
    onConfirm: () -> Unit
) {
    var checked by rememberSaveable { mutableStateOf(true) }

    Dialog(
        onDismissRequest = onDismissRequest,
        properties = DialogProperties(
            dismissOnBackPress = true,
            usePlatformDefaultWidth = false,
            dismissOnClickOutside = true
        )
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.BottomCenter
        ) {
            // 1. 全屏模糊背景层
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .blur(8.dp) // 模糊程度可按需调整
                    .background(Color.Black.copy(alpha = 0.4f)) // 半透明背景增强模糊质感
                    .clickable { onDismissRequest() } // 点击模糊区域关闭Dialog
            )

            // 2. Dialog内容Card，位于模糊层上方
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 20.dp, vertical = 18.dp)
                    .background(Color.Transparent),
                backgroundColor = DialogBackgroundColor,
                shape = DefaultDialogRoundedCorners,
                border = BorderStroke(1.dp, Color.White.copy(0.20f)),
                elevation = 0.dp
            ) {
                // 填充Dialog内容示例
                Column(modifier = Modifier.padding(20.dp)) {
                    Text(text = "Premium 会员", fontSize = 20.sp, fontWeight = FontWeight.Bold)
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(text = "解锁全部高级功能，享受无广告体验")
                    Spacer(modifier = Modifier.height(24.dp))
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.End
                    ) {
                        TextButton(onClick = onDismissRequest) { Text("取消") }
                        Spacer(modifier = Modifier.width(8.dp))
                        Button(onClick = onConfirm) { Text("开通会员") }
                    }
                }
            }
        }
    }
}

关键说明：

• 利用Box的层级特性，模糊层在下层，内容Card在上层，确保内容不被模糊
• blur()的数值和背景色透明度可根据视觉需求灵活调整
• 给模糊层添加clickable，还原原生Dialog点击外部关闭的行为
• 若需要更贴近系统原生的动态模糊效果（如Android 12+或iOS风格），可结合AndroidView封装原生RenderEffect实现，但上述基础方案已能满足多数场景需求

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