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

Question

我有这个代码：

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

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

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

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

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