Saltar a contenido

5.3 Menús, diálogos y mensajes

Lista desplegable

val ciudades = listOf("Madrid", "Valencia", "Sevilla")
var abierto by remember { mutableStateOf(false) }
var ciudad by remember { mutableStateOf(ciudades[0]) }

Box {
    OutlinedButton(onClick = { abierto = true }) { Text(ciudad) }
    DropdownMenu(expanded = abierto, onDismissRequest = { abierto = false }) {
        ciudades.forEach { c ->
            DropdownMenuItem(text = { Text(c) }, onClick = { ciudad = c; abierto = false })
        }
    }
}

Diálogo de alerta

Un diálogo interrumpe al usuario para pedirle una confirmación. Se muestra mientras una variable sea true:

var mostrar by remember { mutableStateOf(false) }

Button(onClick = { mostrar = true }) { Text("Borrar") }

if (mostrar) {
    AlertDialog(
        onDismissRequest = { mostrar = false },
        title = { Text("¿Borrar la tarea?") },
        text = { Text("Esta acción no se puede deshacer.") },
        confirmButton = { TextButton(onClick = { borrar(); mostrar = false }) { Text("Borrar") } },
        dismissButton = { TextButton(onClick = { mostrar = false }) { Text("Cancelar") } }
    )
}

Snackbar: un aviso con acción

Más moderno que el Toast: aparece abajo, puede llevar un botón («Deshacer») y se integra con Scaffold.

val snackbar = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(snackbarHost = { SnackbarHost(snackbar) }) { margen ->
    Button(Modifier.padding(margen), onClick = {
        scope.launch {
            val r = snackbar.showSnackbar("Tarea borrada", actionLabel = "Deshacer")
            if (r == SnackbarResult.ActionPerformed) restaurar()
        }
    }) { Text("Borrar") }
}

Mostrar un snackbar es una función suspendida, por eso se lanza dentro de scope.launch.

Selector de fecha

Requiere @OptIn(ExperimentalMaterial3Api::class).

val estado = rememberDatePickerState()
DatePicker(state = estado)
// estado.selectedDateMillis contiene la fecha elegida (milisegundos)

¿Cuál uso?

Situación Componente
Elegir una opción de varias DropdownMenu
Confirmar algo peligroso AlertDialog
Informar sin interrumpir Snackbar (o Toast)
Elegir una fecha DatePicker