Jetpack Compose Dialog未显示灰色遮罩问题求助

你看不到灰色遮罩的核心原因是：你使用的是Compose基础Dialog组件，它默认没有内置灰色遮罩（scrim），而大部分文档示例中带遮罩的是符合Material Design规范的AlertDialog组件。

下面提供两种解决方式：

方式一：改用AlertDialog（推荐） #

AlertDialog是Material Design风格的弹窗组件，自带默认灰色遮罩，直接替换即可：

@Composable
fun CustomDialog() {
    var showDialog by remember { mutableStateOf(true) }
    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            // 自定义弹窗内容
            content = {
                Column(modifier = Modifier.fillMaxWidth().background(Color.Red)) {
                    Text(text = "Hello Dialog!")
                    Text(text = "Subtitle!")
                }
            }
        )
    }
}

如果需要遵循Material Design的标题/按钮规范，也可以使用AlertDialog的title、confirmButton等参数构建标准弹窗。

方式二：给基础Dialog手动添加遮罩 #

如果必须使用基础Dialog，可以通过scrimColor参数手动设置遮罩颜色：

@Composable
fun CustomDialog() {
    var showDialog by remember { mutableStateOf(true) }
    if (showDialog) {
        Dialog(
            onDismissRequest = { showDialog = false },
            // 设置灰色遮罩（使用主题中的scrim颜色并调整透明度）
            scrimColor = MaterialTheme.colorScheme.scrim.copy(alpha = 0.5f)
        ) {
            Column(modifier = Modifier.fillMaxWidth().background(Color.Red)) {
                Text(text = "Hello Dialog!")
                Text(text = "Subtitle!")
            }
        }
    }
}

额外优化建议 #

你的CustomDialog当前嵌套在Surface组件内部，虽然不影响功能，但更规范的做法是将其移到TestsTheme根层级下，和Surface同级，明确弹窗的独立层级：

setContent {
    TestsTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Column(modifier = Modifier.fillMaxSize()) {
                Greeting("Android")
            }
        }
        CustomDialog() // 移至Surface外部
    }
}

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