Navegación SwiftUI de lista a detalle

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:007:59

Navegación SwiftUI de lista a detalle

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 20 de 23

Clase 20 / 23

Recursos

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.

Resumen

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

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

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

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

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

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

Navegación SwiftUI de lista a detalle

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