Dialog

El componente Dialog muestra mensajes emergentes o solicita la entrada del usuario en una capa encima del contenido principal de la app. Crea una experiencia de IU disruptiva para captar la atención del usuario.

Entre los casos de uso de un diálogo, se encuentran los siguientes:

• Confirmación de la acción del usuario, como cuando se borra un archivo
• Solicita la entrada del usuario, como en una app de lista de tareas pendientes.
• Presentar una lista de opciones para la selección del usuario, como elegir un país en una configuración de perfil

Figura 1: Ejemplo de un diálogo propagado con íconos y texto.

Cuadro de diálogo de alerta

El elemento componible AlertDialog proporciona una API conveniente para crear un diálogo con tema de Material Design. AlertDialog tiene parámetros específicos para controlar elementos particulares del diálogo. Entre ellas, se incluyen las siguientes:

• title: Es el texto que aparece en la parte superior del diálogo.
• text: Es el texto que aparece centrado dentro del diálogo.
• icon: Es el gráfico que aparece en la parte superior del diálogo.
• onDismissRequest: Es la función a la que se llama cuando el usuario descarta el diálogo, por ejemplo, presionando fuera de él.
• dismissButton: Es un elemento componible que funciona como botón para descartar.
• confirmButton: Es un elemento componible que funciona como botón de confirmación.

En el siguiente ejemplo, se implementan dos botones en un diálogo de alerta: uno que descarta el diálogo y otro que confirma su solicitud.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirmation()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}
Dialog.kt

Esta implementación implica un elemento componible superior que pasa argumentos al elemento secundario componible de la siguiente manera:

@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}
Dialog.kt

Esta implementación se muestra de la siguiente manera:

Figura 2: Un diálogo de alerta con botones.

Nota: Cuando el usuario hace clic en cualquiera de los botones, se cierra el diálogo. Cuando el usuario hace clic en Confirmar, llama a una función que también controla la confirmación. En este ejemplo, esas funciones son onDismissRequest() y onConfirmRequest().

Nota: En los casos en que tu diálogo requiera un conjunto de botones más complejo, te recomendamos usar el elemento componible Dialog y propagarlo de forma más libre.

Elemento componible de diálogo

Dialog es un elemento componible básico que no proporciona ningún estilo ni ranuras predefinidas para el contenido. Es un contenedor relativamente sencillo que debes propagar con un contenedor como Card. Estos son algunos de los parámetros clave de un diálogo:

• onDismissRequest: Es la lambda a la que se llama cuando el usuario cierra el diálogo.
• properties: Es una instancia de DialogProperties que proporciona alcance adicional para la personalización.

Precaución: A diferencia del ejemplo de AlertDialog en la sección anterior, debes especificar manualmente el tamaño y la forma de Dialog. También debes proporcionar un contenedor interno.

Ejemplo básico

El siguiente ejemplo es una implementación básica del elemento Dialog componible. Ten en cuenta que usa un Card como contenedor secundario. Sin Card, el componente Text aparecería solo sobre el contenido principal de la app.

@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Text(
                text = "This is a minimal dialog",
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center),
                textAlign = TextAlign.Center,
            )
        }
    }
}
Dialog.kt

Esta implementación aparece de la siguiente manera: Ten en cuenta que, cuando se abre el diálogo, el contenido principal de la app debajo se muestra oscuro y inhabilitado:

Figura 3: Diálogo mínimo.

Ejemplo avanzado

A continuación, se muestra una implementación más avanzada del elemento Dialog componible. En este caso, el componente implementa de forma manual una interfaz similar a la del ejemplo anterior de AlertDialog.

Precaución: Si solo necesitas mostrar un diálogo de dos botones, como en este ejemplo, debes usar AlertDialog y su API más conveniente. Sin embargo, si deseas crear un diálogo más complejo, quizás con formularios y varios botones, debes usar Dialog con contenido personalizado, como en el siguiente ejemplo.

@Composable
fun DialogWithImage(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    painter: Painter,
    imageDescription: String,
) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        // Draw a rectangle shape with rounded corners inside the dialog
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(375.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Image(
                    painter = painter,
                    contentDescription = imageDescription,
                    contentScale = ContentScale.Fit,
                    modifier = Modifier
                        .height(160.dp)
                )
                Text(
                    text = "This is a dialog with buttons and an image.",
                    modifier = Modifier.padding(16.dp),
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Dismiss")
                    }
                    TextButton(
                        onClick = { onConfirmation() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Confirm")
                    }
                }
            }
        }
    }
}
Dialog.kt

Esta implementación se muestra de la siguiente manera:

Figura 4: Un diálogo que incluye una imagen.

Recursos adicionales

• Documentos de Material UI