Listas, navegación y formularios

La mayoría de las apps son, en esencia, listas de cosas por las que navegas: correos, tareas, productos. SwiftUI hace esto sencillo y elegante con List, ForEach y NavigationStack. Con esta lección ya podrás construir apps de verdad.

List y ForEach

List crea una lista desplazable nativa. Con datos estáticos:

List {
    Text("Manzana")
    Text("Pera")
    Text("Uva")
}

Para datos dinámicos, ForEach recorre una colección. Y aquí aparece Identifiable: cada fila necesita una identidad estable para que SwiftUI sepa cuál es cuál:

struct Tarea: Identifiable {
    let id = UUID()
    let titulo: String
}

let tareas = [Tarea(titulo: "Estudiar"), Tarea(titulo: "Entrenar")]

List(tareas) { tarea in
    Text(tarea.titulo)
}

Filas con contenido rico

Cada fila puede ser cualquier vista. Combina lo aprendido:

List(tareas) { tarea in
    HStack {
        Image(systemName: "circle")
        VStack(alignment: .leading) {
            Text(tarea.titulo).font(.headline)
            Text("Pendiente").font(.caption).foregroundStyle(.secondary)
        }
    }
}

Navegación con NavigationStack

Para moverte entre pantallas, envuelve tu contenido en un NavigationStack y usa NavigationLink:

NavigationStack {
    List(tareas) { tarea in
        NavigationLink(tarea.titulo) {
            DetalleTarea(tarea: tarea)      // pantalla destino
        }
    }
    .navigationTitle("Tareas")
}

Al tocar una fila, SwiftUI apila la pantalla de detalle y añade el botón “atrás” automáticamente. navigationTitle pone el título de la barra.

Form: recoger datos

Form agrupa controles de entrada con el estilo nativo de Ajustes de iOS:

struct NuevaTarea: View {
    @State private var titulo = ""
    @State private var prioridad = 1
    @State private var urgente = false

    var body: some View {
        Form {
            Section("Detalles") {
                TextField("Título", text: $titulo)
                Stepper("Prioridad: \(prioridad)", value: $prioridad, in: 1...5)
                Toggle("Urgente", isOn: $urgente)
            }
        }
    }
}

Cada control usa un $binding (Nivel 2.4) para conectarse al @State.

Presentar una hoja (.sheet)

Para mostrar una pantalla modal (crear algo, ver detalle) desde abajo:

struct Lista: View {
    @State private var mostrandoNueva = false

    var body: some View {
        NavigationStack {
            List { /* … */ }
                .toolbar {
                    Button("Añadir", systemImage: "plus") {
                        mostrandoNueva = true
                    }
                }
                .sheet(isPresented: $mostrandoNueva) {
                    NuevaTarea()
                }
        }
    }
}