No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Navegación con NavigationStack

20/23
Recursos

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!

Aportes 0

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?