Mostrar mensajes y abrir vistas modales son dos acciones básicas en cualquier app iOS. Con alerts y sheets en SwiftUI puedes avisar al usuario, pedirle confirmaciones y desplegar formularios completos sin salir de la pantalla actual. Aquí verás cómo conectarlos a un estado, agregar botones y, finalmente, integrar un formulario con una lista usando closures.
Cómo se construye un alert en SwiftUI paso a paso
Un alert necesita dos piezas mínimas para funcionar: un estado booleano que decida si se muestra y un botón que active ese estado. La clase parte creando un archivo nuevo llamado AlertPractice desde un template SwiftUI [00:18].
El flujo básico se arma así:
- Declarar
@State private var showAlert = false en la parte superior de la vista.
- Crear un
Button("Show alert") dentro de un VStack que cambie showAlert = true.
- Agregar el modificador
.alert("Este es un mensaje de alerta", isPresented: $showAlert) { } al final del VStack [01:05].
El símbolo $ antes de showAlert es clave: convierte el estado en un binding, lo que permite que el alert lo lea y lo modifique cuando se cierre. Al presionar el botón en el preview, aparece la alerta con el mismo texto que pasaste como mensaje y un único botón OK por defecto.
¿Qué hace el símbolo $ en SwiftUI? Convierte una propiedad @State en un binding, es decir, una referencia que otra vista puede leer y escribir. Por eso $showAlert permite que el alert apague el estado cuando desaparece.
Cómo agregar varios botones dentro del alert
Dentro del closure del modificador .alert puedes declarar tantos Button como necesites. En la clase se agregan dos: uno de aceptar y otro de cancelar, cada uno con su propia acción print [01:48].
swift
.alert("Este es un mensaje de alerta", isPresented: $showAlert) {
Button("Aceptar") { print("Aceptar") }
Button("Cancelar") { print("Cancelar") }
}
Al abrir la consola y presionar cada opción, verás impreso el texto correspondiente. Así confirmas que la acción del botón se ejecuta antes de que el alert se cierre.
Qué es un sheet y cómo se usa para mostrar vistas
Mientras el alert sirve para mensajes cortos, el sheet sirve para presentar vistas completas de forma modal, ideal para formularios o detalles. La transición es directa: renombras el estado a showSheet, eliminas el modificador .alert y agregas .sheet(isPresented: $showSheet) { } [02:42].
¿Cuál es la diferencia entre alert y sheet en SwiftUI? Un alert muestra un mensaje breve con botones de acción. Un sheet presenta una vista completa modal, útil para formularios, detalles o flujos secundarios.
Dentro del content del sheet puedes poner cualquier vista. Primero se prueba con un simple Text("Vista nueva") y luego se reemplaza por la vista del formulario CreateNoteView que ya existía del proyecto [03:16]. Con ese cambio, el botón abre el formulario completo encima de la pantalla actual.
Cómo integrar el sheet con la ListView usando overlay
Llevar este sheet a la ListView requiere copiar el modificador, agregar un nuevo @State var showSheet en ese archivo y crear un botón que lo active. Aquí entra un modificador útil: overlay.
El overlay superpone una vista encima de otra. Si lo aplicas directo sobre la lista, el botón aparece flotando en el centro tapando contenido [04:12]. La solución es envolver el botón en un VStack y agregar un Spacer() antes para empujarlo al fondo:
VStack dentro del overlay.
Spacer() arriba para ocupar el espacio disponible.
Button("Create note") abajo, que cambia showSheet a true.
Así logras un botón fijo en la parte inferior, parecido a un floating action button, sin bloquear la lista.
Cómo comunicar el formulario con la lista usando un closure
Al crear una nota, el botón de guardar no cerraba el sheet ni avisaba a la lista. Para resolverlo se usa un closure como parámetro del formulario [05:28]. Un closure es un bloque de código que puedes guardar en una variable y ejecutar después.
La implementación queda así:
- Dentro de
CreateNoteView, declarar var onNoteCreated: ((Card) -> Void)? justo debajo de los states.
- Marcarlo como opcional para que los previews no exijan pasarlo.
- Llamarlo con
onNoteCreated?(card) justo después de crear el Card.
En la ListView, al instanciar el formulario dentro del sheet, le pasas el bloque que se ejecutará al recibir la nota:
swift
CreateNoteView { card in
print(card)
showSheet = false
}
¿Qué es un closure en Swift? Es un bloque de código reutilizable que puedes asignar a una variable, pasar como parámetro y ejecutar más tarde. Sirve para que una vista hija avise a la vista padre cuando ocurre algo.
Esa última línea, showSheet = false, es la que oculta el formulario automáticamente después de guardar la nota [06:55]. Al probar el flujo en el preview, escribes título, texto, eliges tamaño small, presionas guardar y la consola imprime dos veces: una desde el formulario y otra desde el closure en la lista, confirmando que la información viajó correctamente entre vistas.
Con esto tu app ya tiene un formulario que se abre como modal, comunica datos a la lista y se cierra solo. ¿Qué otro flujo modal te gustaría agregar a tu proyecto? Cuéntalo en los comentarios.