0
363
Vistas¿Cómo hacer una vista previa de un diálogo en Jetpack Compose?
tengo este codigo:
@Composable fun SomeDialog() { Dialog(onDismissRequest = { }, properties = DialogProperties()) { .... } } @Preview(showBackground = true) @Composable fun SomeDialogPreview() { MyTherapyPreviewTheme { Scaffold { SomeDialog() } } }Esperaba que esta vista previa generara una vista previa similar a otras funciones componibles, pero en lugar de esto, solo veo un rectángulo blanco en la vista previa (andamio puro).
¿Cómo puedo generar una vista previa del diálogo de manera adecuada? ¿O tal vez solo puedo hacer una vista previa del contenido del diálogo en una función separada?
3 Respuestas
Responde la pregunta
0
@MihaiBC da en el clavo sobre por qué no puede obtener una vista previa (todavía). Mientras tanto, puede obtener una vista previa del contenido del diálogo extrayendo el contenido del diálogo en un componible separado.
Por ejemplo, si su cuadro de diálogo se ve así:
@Composable fun SomeDialog() { Dialog(onDismissRequest = { }, properties = DialogProperties()) { Card(modifier = Modifier.fillMaxWidth()) { ..... } } }luego extraiga el contenido de la siguiente manera:
@Composable fun SomeDialog() { Dialog(onDismissRequest = { }, properties = DialogProperties()) { SomeDialogContent() } } @Composable fun SomeDialogContent(){ Card(modifier = Modifier.fillMaxWidth()) { ..... } } y finalmente obtenga una vista previa de SomeDialogContent con algo de relleno:
@Preview @Composable fun PreviewSomeDialogContent() { AppTheme { Box( modifier = Modifier .fillMaxSize() .background(MaterialTheme.colors.background) .padding(20.dp), contentAlignment = Alignment.Center, ) { SomeDialogContent({}) } } } 
0
Hay una forma más de ver la vista previa, pero esta vez será en su dispositivo en vivo o simulador.
En la ventana de vista previa, busque el botón Implementar vista previa , que creará su vista previa en el teléfono. 
Tenga en cuenta que solo se construirá este componible.