Aprender a navegar entre pantallas en SwiftUI es uno de esos pasos que transforman una app estática en algo realmente funcional. Aquí descubrirás cómo conectar una lista con una vista de detalle usando NavigationStack, navigationDestination y gestos de selección, ideal si estás construyendo tu primera app con SwiftUI.
¿Cómo crear una vista de detalle en SwiftUI?
Todo empieza con un archivo nuevo dentro de la carpeta de vistas. En el minuto [00:24] se crea InDetailView como base para mostrar el contenido de cada nota seleccionada.
La propiedad principal es un @State var card de tipo InCard, que representa el card que se va a pintar en pantalla. Para que el preview funcione, hay que inyectar una instancia con título, texto y tipo small.
¿Por qué usar ScrollView como contenedor base?
Cuando el contenido puede variar entre muy corto y muy largo, un ScrollView garantiza que siempre puedas ver todo. Sobre él se aplican varios modificadores que mejoran la presentación visual:
- Un background blanco para contrastar con el texto negro.
- Un cornerRadius de 16 para suavizar las esquinas.
- Un padding exterior para separar del borde.
- Un background adicional en color cyan con opacity de 0.2 para dar contraste.
¿Qué es un ScrollView en SwiftUI? Es un contenedor que permite desplazar verticalmente el contenido cuando excede el tamaño de pantalla. Lo usas cuando no sabes qué tan largo será el texto o la lista.
¿Cómo organizar el contenido con VStack y Spacer?
Dentro del ScrollView se coloca un VStack con spacing: 20 para separar los dos textos: título y cuerpo. Después se añade un Spacer para empujar el contenido hacia arriba.
Al notar que la vista se ve muy estrecha, en [02:00] se aplica frame(maxWidth: .infinity) a uno de los textos para que ocupe todo el ancho disponible.
Para la tipografía, el título lleva una fuente grande con fontWeight(.bold) y multilineTextAlignment(.leading). El texto del cuerpo usa .body con la misma alineación a la izquierda. Así, sin importar la longitud, todo queda legible y bien acomodado.
¿Cómo conectar la lista con la vista de detalle?
La magia de la navegación ocurre al envolver la lista dentro de un NavigationStack. Este actúa como la raíz de toda la navegación de la app.
A la altura del List, se abre el bloque del NavigationStack y al cierre se agrega el modificador navigationDestination, que recibe dos parámetros clave: un isPresented booleano y la vista de destino.
¿Qué estados necesitas para activar la navegación?
Se declaran dos @State en la lista para controlar el flujo:
showDetails de tipo Bool, iniciado en false, que actúa como bandera para mostrar u ocultar el detalle.selectedCard de tipo InCard? opcional, porque puede que ningún card esté seleccionado al inicio.
La vista de detalle solo se construye cuando se hace if let selectedCard, garantizando que nunca intentes mostrar un card nulo.
¿Para qué sirve navigationDestination en SwiftUI? Define a qué vista navegar cuando una condición booleana se vuelve verdadera. Es la forma moderna de manejar transiciones programáticas dentro de un NavigationStack.
¿Cómo detectar el tap sobre un card?
Aquí entra el modificador onTapGesture aplicado sobre el EndCardView. Cuando el usuario presiona un card, se ejecutan dos asignaciones:
selectedCard = card para indicar cuál se va a mostrar.showDetails = true para activar la navegación.
En [04:35] se prueba el flujo: al tocar el card Llamar a Juan, la app navega a su detalle. Como estás dentro de un NavigationStack, aparece automáticamente un botón back que regresa a la lista.
¿Qué pasos resumen el flujo de navegación?
Para que todo esto funcione, los elementos trabajan en conjunto y cada uno cumple un rol específico.
- Envolver la lista en un NavigationStack como raíz de navegación.
- Agregar
navigationDestination con su isPresented para definir destino y disparador.
- Crear el estado
selectedCard para saber qué card pintar en el detalle.
- Aplicar
onTapGesture sobre cada card para asignar la selección y activar el flag.
Con esta arquitectura, ya puedes navegar a la vista de detalle desde cualquier nota de tu lista. El siguiente reto es personalizar visualmente esa vista usando lo que aprendiste en el módulo uno y compartir tu screenshot en los comentarios.
