Fundamentos de SwiftUI y desarrollo de Interfaces
Desarrolla Apps Increíbles: primeros pasos con SwiftUI
Creación de views y uso de preview
Personalización de views con modifiers y uso de shapes
Image render
Composición de Layouts con Stacks
ScrollView y carousel
List y ForEach
Estructurando nuestra app
Quiz: Fundamentos de SwiftUI y desarrollo de Interfaces
Interacción del Usuario y Componentes de Entrada
Button y manejo de estado con @State
Text Field y Text Editor
Picker y DatePicker
Toggle y Slider
Formularios
Alertas y Modales
Gestures
Animaciones y uso del ProgressView
Quiz: Interacción del Usuario y Componentes de Entrada
Manejo del Estado y Arquitectura con ViewModels
ViewModels y @ObservedObject
Compartir Datos con @EnvironmentObject
Creación de Componentes Reutilizables con @Binding
Quiz: Manejo del Estado y Arquitectura con ViewModels
Navegación Avanzada
Navegación con NavigationStack
Personalización de la Barra de Navegación
Quiz: Navegación Avanzada
Lanzamiento de la app
Funcionalidades extra
Lanzamiento en simulador
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
Para trasladarte a una vista de detalle, primero necesitas definir esa vista. Sigamos estos pasos para crearla y configurarla adecuadamente:
SwiftUI
. Dale un nombre descriptivo como DetailView
.@State
para declarar una propiedad como card
, de tipo Card
.ScrollView
para lograr desplazamiento vertical si el contenido es extenso.CornerRadius
y padding
.ScrollView
: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))
}
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:
NavigationStack
:NavigationStack
para habilitar la navegación.NavigationDestination
:navigationDestination
para especificar hacia dónde navegar al seleccionar un elemento en la lista.showDetails
para gestionar cuándo mostrar la vista de detalle.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)
}
}
}
}
onTapGesture
:@State
):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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?