android - 如何在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({})
        }
    }
}