Jetpack Compose中如何让Snackbar显示在Dialog/AlertDialog上方？

在Compose中，Dialog默认处于独立的Window层级，若直接使用Activity层级的Scaffold Snackbar，会被Dialog的遮罩或内容遮挡。以下是两种可行的解决思路：

方案一：纯Compose实现——将SnackbarHost嵌入Dialog内部 #

把Snackbar的宿主放到Dialog的内容层级中，让Snackbar属于Dialog的Window上下文，自然会显示在Dialog内容上方。

代码示例：

@Composable
fun DialogWithSnackbar() {
    var showDialog by remember { mutableStateOf(false) }
    val dialogSnackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    Button(onClick = { showDialog = true }) {
        Text(text = "打开对话框")
    }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            title = { Text("示例对话框") },
            // 替换默认content，嵌入带SnackbarHost的Scaffold
            content = {
                Scaffold(
                    snackbarHost = { SnackbarHost(hostState = dialogSnackbarHostState) }
                ) { padding ->
                    Column(modifier = Modifier.padding(padding)) {
                        Text(text = "对话框内部内容")
                    }
                }
            },
            confirmButton = {
                Button(
                    onClick = {
                        scope.launch {
                            dialogSnackbarHostState.showSnackbar(
                                message = "对话框内的Snackbar",
                                actionLabel = "知道了"
                            )
                        }
                    }
                ) {
                    Text(text = "显示Snackbar")
                }
            },
            dismissButton = {
                Button(onClick = { showDialog = false }) {
                    Text(text = "取消")
                }
            }
        )
    }
}

这种方式完全遵循Compose的状态管理逻辑，Snackbar的生命周期会和Dialog绑定，无需额外处理资源释放。

方案二：混合View系实现——绑定Snackbar到Dialog的DecorView #

如果需要复用传统View系的Snackbar逻辑，可以通过LocalView获取Dialog的根视图，将Snackbar绑定到该视图上，使其处于Dialog的Window层级。

代码示例：

@Composable
fun DialogWithViewSnackbar() {
    var showDialog by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope()

    Button(onClick = { showDialog = true }) {
        Text(text = "打开对话框")
    }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            title = { Text("示例对话框") },
            text = { Text("点击按钮触发Snackbar") },
            confirmButton = {
                val dialogRootView = LocalView.current
                Button(
                    onClick = {
                        scope.launch {
                            Snackbar.make(
                                dialogRootView,
                                "显示在Dialog上方的Snackbar",
                                Snackbar.LENGTH_SHORT
                            ).show()
                        }
                    }
                ) {
                    Text(text = "显示Snackbar")
                }
            }
        )
    }
}

注意：这种方式需要注意Dialog的生命周期，避免Dialog销毁后Snackbar仍残留的问题。

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