Navegación y Detalles en SwiftUI: Conexión de Listas y Vistas

En SwiftUI, la navegación eficiente entre vistas es esencial para crear aplicaciones intuitivas y funcionales. Aprenderás a utilizar NavigationStack, NavigationDestination, y estados para gestionar la navegación y el intercambio de datos entre vistas.

¿Cómo se crea una vista de detalle?

Para trasladarte a una vista de detalle, primero necesitas definir esa vista. Sigamos estos pasos para crearla y configurarla adecuadamente:

1. Crear el archivo de la vista de detalle:

• En tu proyecto, crea un nuevo archivo de tipo SwiftUI. Dale un nombre descriptivo como DetailView.

1. Definir la estructura base:

• Asegúrate de crear una propiedad que represente el objeto que pinta la vista de detalle. Puedes usar @State para declarar una propiedad como card, de tipo Card.

1. Configurar el contenido principal:

• Utiliza un ScrollView para lograr desplazamiento vertical si el contenido es extenso.
• Personaliza la apariencia usando propiedades como CornerRadius y padding.

1. Configurar el contenido dentro de ScrollView:

• Implementa un VStack con el espacio deseado entre elementos, ideal para agregar múltiples textos, como el título y el cuerpo del contenido.

ScrollView {
    VStack(spacing: 20) {
        Text(card.title)
            .font(.largeTitle)
            .frame(maxWidth: .infinity)
            .multilineTextAlignment(.leading)
        Text(card.text)
            .font(.body)
            .frame(maxWidth: .infinity)
            .multilineTextAlignment(.leading)
    }
    .background(Color.white)
    .cornerRadius(16)
    .padding()
    .background(Color.cyan.opacity(0.2))
}

¿Cómo se conecta la lista con la vista de detalle?

Una vez creada la vista de detalle, es crucial ligarla a la lista inicial. Esto permite que al seleccionar un elemento de la lista, se muestre la vista correspondiente:

1. Envolver la lista en un NavigationStack:

• Envuelve tu lista dentro de un NavigationStack para habilitar la navegación.

1. Configurar NavigationDestination:

• Usa el modificador navigationDestination para especificar hacia dónde navegar al seleccionar un elemento en la lista.

1. Definir los estados necesarios:

• Introduce un estado booleano como showDetails para gestionar cuándo mostrar la vista de detalle.
• Declara un estado opcional para el selectedCard, representando el card seleccionado.

@State private var showDetails = false
@State private var selectedCard: Card?

var body: some View {
    NavigationStack {
        List(cards) { card in
            CardView(card: card)
                .onTapGesture {
                    selectedCard = card
                    showDetails = true
                }
        }
        .navigationDestination(isPresented: $showDetails) {
            if let card = selectedCard {
                DetailView(card: card)
            }
        }
    }
}

¿Qué herramientas se utilizan para la interacción entre vistas?

1. onTapGesture:

• Ejecuta acciones al detectar interacciones. Úsalo para gestionar qué se hace al tocar un elemento, como actualizar el estado del seleccionado.

1. Estados (@State):

• Estrategia principal para compartir y manejar el estado entre las vistas. Usa States para controlar qué datos se ven en la vista de destino y cuándo debe mostrarse.

Estos conceptos y prácticas te permitirán crear aplicaciones robustas y navegar entre vistas de forma fluida en SwiftUI. ¡Sigue explorando SwiftUI y aplicando estos conocimientos a tus proyectos personales!