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

Question

我有这个代码：

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

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

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

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

Answer 1

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

您可以在此处查看更多详细信息。

Answer 2

@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({})
        }
    }
}

Answer 3

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

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

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