SwiftUI ForEach explicado con código y ejemplos

En el corazón de casi cualquier aplicación moderna de iOS se encuentra la necesidad de mostrar listas, cuadrículas o carruseles de datos. Ya sea una lista de tareas, un feed de redes sociales o un selector de configuraciones, necesitas una forma de transformar datos crudos en vistas visuales.

En UIKit, teníamos UITableViewDataSource y UICollectionViewDataSource, sistemas potentes pero verbosos y propensos a errores. En SwiftUI, esta complejidad se destila en una estructura elegante y engañosamente simple: ForEach.

Sin embargo, muchos desarrolladores (incluso intermedios) malinterpretan ForEach. No es un bucle for tradicional. No es simplemente un iterador. Es un generador de vistas dinámico con reglas estrictas sobre identidad y estado.

En este artículo de 2000 palabras, desglosaremos la anatomía de ForEach, exploraremos sus tres modos de uso, aprenderemos a manejar enlaces (bindings) y evitaremos los errores que causan crasheos en producción.

1. ¿Qué es realmente ForEach?

Para dominar ForEach, primero debes olvidar lo que sabes sobre el bucle for en la programación imperativa.

En Swift estándar (imperativo):

// Esto ejecuta una acción 5 veces
for i in 0..<5 {
    print(i)
}

En SwiftUI (declarativo):

// Esto declara una estructura que generará 5 vistas
ForEach(0..<5) { i in
    Text("Ítem \(i)")
}

ForEach es una estructura (Struct) que conforma al protocolo View (aunque técnicamente es un contenedor dinámico de vistas). Su trabajo no es “iterar”, sino computar vistas bajo demanda basándose en una colección de datos subyacente.

¿Por qué no usar simplemente un bucle for dentro de un VStack?

SwiftUI utiliza un sistema de ViewBuilder. Los bucles for tradicionales no devuelven vistas; ejecutan código. ForEach está diseñado específicamente para trabajar dentro de estos constructores de vistas, permitiendo a SwiftUI entender la estructura de tu interfaz antes de renderizarla.

2. Los Tres Modos de ForEach

Dependiendo de los datos que tengas, ForEach se comporta de manera diferente. Existen tres inicializadores principales que debes conocer.

Modo 1: Rangos Constantes (El Bucle Simple)

Este es el uso más básico. Se utiliza cuando quieres repetir una vista un número fijo de veces y no depende de un array dinámico.

Caso de uso: Estrellas en una reseña, placeholders de carga, o elementos decorativos.

struct RatingView: View {
    var rating: Int
    
    var body: some View {
        HStack {
            // Genera 5 iconos
            ForEach(0..<5) { index in
                Image(systemName: index < rating ? "star.fill" : "star")
                    .foregroundColor(.yellow)
            }
        }
    }
}

La regla de oro: El rango debe ser constante (Range<Int>). No intentes usar esto para arrays que cambian de tamaño (hablaremos de esto en la sección de errores comunes).

Modo 2: Identificación por KeyPath (id: \.self)

Cuando tienes un array de tipos simples (como String o Int) que no conforman al protocolo Identifiable, necesitas decirle a SwiftUI cómo distinguir un elemento de otro.

Caso de uso: Una lista simple de etiquetas o categorías.

struct TagsView: View {
    let tags = ["SwiftUI", "iOS", "Development", "Coding"]

    var body: some View {
        HStack {
            ForEach(tags, id: \.self) { tag in
                Text(tag)
                    .padding()
                    .background(Color.blue.opacity(0.1))
                    .cornerRadius(8)
            }
        }
    }
}

¿Qué significa id: \.self? Le estás diciendo a SwiftUI: “La identidad de este elemento es el elemento mismo”. Si tienes dos strings idénticos (ej: ["Hola", "Hola"]), SwiftUI se confundirá porque ambos tienen el mismo identificador. Esto puede causar problemas de animación y renderizado.

Modo 3: Protocolo Identifiable (La Forma Profesional)

Esta es la forma más robusta y común en aplicaciones reales. Si tus datos conforman el protocolo Identifiable, ForEachfunciona “mágicamente” sin necesidad de especificar un parámetro id.

Requisito: Tu modelo debe tener una propiedad id que sea única y estable.

struct Contact: Identifiable {
    let id = UUID() // Identificador único generado automáticamente
    let name: String
    let icon: String
}

struct ContactListView: View {
    let contacts = [
        Contact(name: "Ana", icon: "person.circle"),
        Contact(name: "Carlos", icon: "person.circle.fill"),
        Contact(name: "Tim", icon: "star.circle")
    ]

    var body: some View {
        List {
            // No necesitamos 'id: \.id' porque Contact es Identifiable
            ForEach(contacts) { contact in
                HStack {
                    Image(systemName: contact.icon)
                    Text(contact.name)
                }
            }
        }
    }
}

Este método es superior porque permite a SwiftUI rastrear elementos individuales incluso si cambian de orden o si sus propiedades mutan.

3. Profundizando en la Identidad (El secreto del rendimiento)

Para dominar ForEach, debes entender cómo SwiftUI “piensa”.

Cuando actualizas un array (agregas, borras o mueves un ítem), SwiftUI necesita responder a la pregunta: ¿Qué cambió?

1. ¿Se agregó un nuevo elemento? (Insertar vista con animación)
2. ¿Se eliminó un elemento? (Eliminar vista con animación)
3. ¿Un elemento cambió de posición? (Mover vista)

Si usas índices (ej: 0..<array.count), SwiftUI solo ve que la posición 0 cambió, la posición 1 cambió, etc. No sabe que el elemento “Ana” se movió de la fila 1 a la 10. Simplemente repintará todo.

Al usar Identificadores Estables (UUID), SwiftUI dice: “Ah, el elemento con ID XYZ estaba en la fila 1 y ahora está en la 10. Moveré esa vista visualmente”. Esto resulta en animaciones fluidas y un rendimiento mucho mayor.

4. ForEach Avanzado: Trabajando con Bindings ($)

Hasta iOS 14, si querías modificar un elemento dentro de un ForEach (por ejemplo, un Toggle en una lista de tareas), tenías que hacer malabares con los índices para encontrar el elemento en el array original.

Desde iOS 15, ForEach soporta la inicialización directa desde un Binding. Esto es un cambio radical.

El problema antiguo:

Queremos una lista de tareas donde podamos marcar “completado”.

La solución moderna:

Observa el uso del símbolo de dólar $ en la colección y en el argumento del closure.

struct Task: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool
}

struct TaskManagerView: View {
    // Nuestra fuente de la verdad
    @State private var tasks = [
        Task(title: "Comprar leche", isCompleted: false),
        Task(title: "Estudiar Swift", isCompleted: true),
        Task(title: "Hacer ejercicio", isCompleted: false)
    ]

    var body: some View {
        List {
            // Pasamos el Binding ($tasks)
            ForEach($tasks) { $task in 
                HStack {
                    Text(task.title)
                    Spacer()
                    // Ahora podemos enlazar directamente al Toggle
                    Toggle("", isOn: $task.isCompleted)
                        .labelsHidden()
                }
                .foregroundColor(task.isCompleted ? .gray : .primary)
            }
        }
    }
}

Análisis del código:

1. Pasamos $tasks al ForEach. Esto le dice que queremos referencias de escritura, no solo de lectura.
2. El argumento del closure se define como $task.
3. Dentro, $task es un Binding<Task>, lo que nos permite pasárselo al Toggle.
4. Cuando el usuario toca el Toggle, el cambio se propaga automáticamente hacia arriba al array @State private var tasks.

5. ForEach vs List vs LazyVStack

Es común confundir el rol de estos tres componentes.

• ForEach: No es un contenedor de diseño. No añade scrolling, ni pone las vistas en columna. Solo genera vistas.
• List: Es un contenedor con estilo de sistema (como UITableView). Proporciona scrolling y separadores automáticamente.
• LazyVStack: Es un contenedor de diseño que apila elementos verticalmente, pero solo renderiza los que están en pantalla.

Combinaciones comunes:

1. Listas estándar:

List {
    ForEach(items) { item in ... }
}

Usa esto el 90% de las veces para menús y listas de datos.

Grids y Layouts personalizados:

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { item in ... }
    }
}

Usa esto para galerías de fotos.

Stacks Simples (Cuidado):

ScrollView {
    VStack { // VStack renderiza TODO el contenido de inmediato
        ForEach(0..<1000) { i in ... } 
    }
}

1. Peligro: Esto creará 1000 vistas en memoria inmediatamente, aunque solo veas 10. Para listas largas, usa LazyVStacko List.

6. Errores Comunes y Cómo Evitarlos (La Sección Anti-Crash)

Si hay una sección que debes memorizar, es esta. Aquí es donde los desarrolladores pierden horas depurando.

Error #1: Iterar sobre índices en arrays dinámicos

Nunca hagas esto si tu array puede cambiar de tamaño (borrar elementos):

// ❌ MALO
ForEach(0..<items.count, id: \.self) { index in
    Text(items[index].name)
}

¿Por qué falla? Imagina que tienes 5 elementos. El rango es 0...4. ForEach crea 5 vistas. El usuario borra el último elemento. El array ahora tiene 4 elementos. Pero ForEach (por un milisegundo antes de actualizarse) todavía puede intentar acceder al índice 4. Resultado: Index out of range. Crash fatal.

Solución: Usa siempre Identifiable o la sintaxis de Binding explicada en la sección 4.

Error #2: IDs duplicados

Si usas id: \.self en un array de strings y tienes ["Manzana", "Manzana"]:

let frutas = ["Manzana", "Manzana", "Pera"]
ForEach(frutas, id: \.self) { fruta in ... }

SwiftUI verá dos elementos con el ID “Manzana”.

• Las animaciones se romperán (una vista volará al lugar de la otra incorrectamente).
• Al borrar uno, podría desaparecer el incorrecto visualmente.
• El scroll puede comportarse de forma errática.

Solución: Envuelve tus datos en un struct con UUID si hay posibilidad de duplicados.

struct Fruta: Identifiable {
    let id = UUID()
    let nombre: String
}

7. Técnicas Avanzadas: Filtrado y Ordenamiento

Rara vez mostramos los datos tal cual vienen de la base de datos. A menudo necesitamos ordenarlos o filtrarlos.

El error de principiante es intentar poner lógica compleja dentro del ForEach. ForEach debe recibir los datos ya limpios.

Computed Properties al Rescate

struct FilteredListView: View {
    @State private var products = [
        Product(name: "Laptop", price: 1000),
        Product(name: "Mouse", price: 20),
        Product(name: "Monitor", price: 300)
    ]
    @State private var showExpensiveOnly = false

    // Lógica fuera del Body
    var filteredProducts: [Product] {
        if showExpensiveOnly {
            return products.filter { $0.price > 100 }
        } else {
            return products
        }
    }

    var body: some View {
        VStack {
            Toggle("Mostrar caros", isOn: $showExpensiveOnly)
            
            List {
                // El ForEach recibe datos limpios
                ForEach(filteredProducts) { product in
                    Text(product.name)
                }
                .animation(.default, value: showExpensiveOnly)
            }
        }
    }
}

Al mover la lógica a filteredProducts, mantienes el body limpio y declarativo. Además, al añadir .animation, SwiftUI animará suavemente la entrada y salida de las filas cuando cambies el filtro.

8. Manipulación de Vistas: onDelete y onMove

ForEach es el único componente que habilita los gestos de deslizar para borrar y arrastrar para reordenar en una List. Estos modificadores se aplican al ForEach, no a la Lista.

List {
    ForEach(items) { item in
        Text(item.name)
    }
    .onDelete(perform: deleteItems) // Habilita swipe-to-delete
    .onMove(perform: moveItems)     // Habilita drag-and-drop
}
.toolbar {
    EditButton() // Necesario para activar el modo de edición visual
}

// Funciones de ayuda
func deleteItems(at offsets: IndexSet) {
    items.remove(atOffsets: offsets)
}

func moveItems(from source: IndexSet, to destination: Int) {
    items.move(fromOffsets: source, toOffset: destination)
}

Nota importante: onDelete y onMove nos devuelven IndexSet (índices), no los elementos en sí. Por eso funcionan perfectamente con los métodos nativos de Array .remove(atOffsets:) y .move(fromOffsets:toOffset:).

9. Rendimiento: El límite de ForEach

¿Puede ForEach manejar 10,000 elementos? La respuesta es: Depende de dónde lo pongas.

• ForEach por sí mismo es rápido creando las estructuras de datos.
• Si pones un ForEach de 10,000 elementos dentro de un VStack (no lazy), SwiftUI intentará renderizar 10,000 vistas de texto, descargar 10,000 imágenes, etc., al mismo tiempo. Tu app se congelará.
• Si pones el mismo ForEach dentro de un List o LazyVStack, SwiftUI solo renderizará las filas visibles en pantalla (digamos, 10 filas) más un pequeño buffer.

Por lo tanto, ForEach escala bien, siempre y cuando su contenedor sea “Lazy” (perezoso).

10. Resumen y Conclusión

ForEach es la piedra angular de la interfaz de usuario basada en datos en SwiftUI. No es solo un bucle; es un puente inteligente entre tus datos y tus vistas.

Puntos Clave para llevar:

1. No es un bucle for: Es un generador de vistas declarativo.
2. Identidad es Rey: Usa siempre Identifiable con UUID para evitar bugs de animación y crashes. Evita id: \.self en objetos complejos.
3. Evita índices: No iterar sobre 0..<array.count si el array es dinámico.
4. Usa Bindings: Utiliza la sintaxis $item en iOS 15+ para crear listas editables con menos código.
5. Contenedores: Usa List o LazyVStack para grandes conjuntos de datos.

Dominar ForEach significa escribir código SwiftUI que no solo funciona, sino que es fluido, eficiente y fácil de mantener. La próxima vez que veas una lista en una app, sabrás exactamente qué está ocurriendo bajo el capó.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram