如何在jetpack compose中预览对话框？答案

【问题标题】：How to make a preview of a dialog in jetpack compose?如何在jetpack compose中预览对话框？
【发布时间】：2021-09-14 07:51:52
【问题描述】：

我有这个代码：

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
        ....
    }
}

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

我预计此预览会生成类似于其他可组合函数的预览，但我在预览中只看到一个白色矩形（纯 Scaffold）。

如何以正确的方式生成对话框预览？或者我只能在单独的函数中预览对话框的内容？

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

@MihaiBC 指出了您为什么不能预览（还）。同时，您可以通过将对话内容提取到单独的组合中来预览对话内容。

例如，如果您的对话框如下所示：

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         Card(modifier = Modifier.fillMaxWidth()) {
             .....
        }
    }
}

然后提取内容如下：

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         SomeDialogContent()
    }
}

@Composable
fun SomeDialogContent(){
   Card(modifier = Modifier.fillMaxWidth()) {
       .....
   }
}

最后预览这个 SomeDialogContent 并添加一些填充：

@Preview
@Composable
fun PreviewSomeDialogContent() {
    AppTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background)
                .padding(20.dp),
            contentAlignment = Alignment.Center,
        ) {
            SomeDialogContent({})
        }
    }
}

【讨论】：

是的，这是预览对话内容的一些变通方法，也是我目前发明的最好的方法

【解决方案2】：

还有另一种查看预览的方式，但这次将在您的实时或模拟器设备上。

在预览窗口中找到一个部署预览按钮，它将在手机上构建您的预览。

请注意，只会构建此可组合项。

【讨论】：

【解决方案3】：

在文档中声明只有 AlertDialog 支持可组合功能，这就是您无法看到预览的原因。

您可以查看更多详情here。

【讨论】：