Alerts y Sheets para mostrar formularios

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Alerts y Sheets para mostrar formularios

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 14 de 23

Clase 14 / 23

Recursos

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.

Resumen

Cómo se construye un alert en SwiftUI paso a paso

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].

¿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

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

¿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.

Cómo integrar el sheet con la ListView usando overlay

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

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.

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.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Alerts y Sheets para mostrar formularios

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos