如何在Jetpack Compose中正确实现Dialog弹窗组件的预览

Jetpack Compose 中的 Dialog 属于窗口级别的悬浮组件，不归属于普通视图的 Composition 树层级，默认的预览面板仅会渲染常规视图树的内容，因此嵌套在 Scaffold 内的 Dialog 不会被正常渲染。

方案1：抽离Dialog内容为独立Composable（官方推荐） #

这是适配性最高、无版本限制的方案，将Dialog的内容部分和Dialog外壳拆分为两个独立函数，预览直接针对内容函数即可：

// 抽离单独的Dialog内容函数，无Dialog外壳逻辑
@Composable
fun SomeDialogContent() {
    // 原本Dialog{}代码块内的所有内容挪到这里
    // 示例内容
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Dialog 标题", style = MaterialTheme.typography.h6)
        Spacer(modifier = Modifier.height(8.dp))
        Text("Dialog 正文内容")
    }
}

@Composable
fun SomeDialog(onDismissRequest: () -> Unit) {
    Dialog(onDismissRequest = onDismissRequest, properties = DialogProperties()) {
        SomeDialogContent()
    }
}

@Preview(showBackground = true)
@Composable
fun SomeDialogContentPreview() {
    MyTherapyPreviewTheme {
        // 直接预览内容即可，和普通Composable预览效果完全一致
        SomeDialogContent()
    }
}

方案2：高版本Compose直接渲染Dialog #

如果你使用的是 Compose BOM 2023.08.00 及以上版本（对应ui-tooling版本1.5.0+），可以直接给预览添加showSystemUi = true参数，即可直接渲染Dialog本身，无需抽离内容：

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun SomeDialogPreview() {
    MyTherapyPreviewTheme {
        SomeDialog()
    }
}

• 方案2仅能展示Dialog的静态效果，无法模拟Dialog的弹出、消失交互，也无法测试点击外部关闭、返回键关闭等逻辑
• 方案1可以单独针对Dialog内容做单元测试、多状态预览（比如不同尺寸、不同主题下的内容适配），可维护性更高，更推荐日常开发使用

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