I have this code:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
....
}
}
@Preview(showBackground = true)
@Composable
fun SomeDialogPreview() {
MyTherapyPreviewTheme {
Scaffold {
SomeDialog()
}
}
}
I expected that this preview will generate a preview similar to other composable functions, but instead of this I only see a white rectangle in the preview (pure Scaffold).
How can I generate a preview of dialog in a proper way? Or maybe I can only make a preview of the content of the dialog in a separate function?
On the documentations is it stated that only AlertDialog supports Composable functions and that is the reason you are unable to see the preview.
You can check more details here .
@MihaiBC is spot-on about why you can not preview (yet). Meanwhile, you can preview dialog content by extracting content of dialog in to a separate composable.
For example, if your dialog looks like this:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
Card(modifier = Modifier.fillMaxWidth()) {
.....
}
}
}
then extract content as following:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
SomeDialogContent()
}
}
@Composable
fun SomeDialogContent(){
Card(modifier = Modifier.fillMaxWidth()) {
.....
}
}
and finally preview this SomeDialogContent
with some padding:
@Preview
@Composable
fun PreviewSomeDialogContent() {
AppTheme {
Box(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.background)
.padding(20.dp),
contentAlignment = Alignment.Center,
) {
SomeDialogContent({})
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.