¿Qué es List en SwiftUI y cómo usarlo en Xcode para presentar datos?

Introducción

SwiftUI es el framework moderno de Apple para construir interfaces de usuario en todas sus plataformas: iOS, iPadOS, macOS, watchOS y tvOS. Introducido en 2019, SwiftUI propone un enfoque declarativo, donde describimos quéqueremos mostrar en pantalla en lugar de cómo dibujarlo paso a paso.

Uno de los elementos fundamentales para presentar información en cualquier aplicación es la lista de datos: listas de contactos, tareas, mensajes, productos, ajustes, etc. En UIKit, este papel lo cumplía principalmente UITableView. En SwiftUI, el equivalente es List.

Este artículo explica en profundidad:

• Qué es List en SwiftUI
• Cómo funciona internamente a nivel conceptual
• Cómo usar List en Xcode para presentar datos
• Cómo trabajar con datos estáticos y dinámicos
• Cómo personalizar filas, estilos e interacciones
• Buenas prácticas y errores comunes

El objetivo es que, al terminar, tengas una comprensión sólida de List y puedas usarla con confianza en tus proyectos.

¿Qué es List en SwiftUI?

List es una vista de SwiftUI diseñada para mostrar colecciones de datos en forma de filas desplazables verticalmente. Cada elemento de la colección se representa como una fila (row).

Conceptualmente, List:

• Es scrollable por defecto
• Gestiona la reutilización de vistas de forma automática
• Se adapta al estilo de la plataforma (iOS, macOS, etc.)
• Permite selección, edición, eliminación y reordenación
• Funciona de forma reactiva con el sistema de estados de SwiftUI

En otras palabras, List es la forma estándar y recomendada de mostrar datos estructurados en SwiftUI.

List vs ScrollView + VStack

Antes de entrar en código, es importante aclarar una duda común:
¿por qué usar List y no simplemente un ScrollView con un VStack?

Diferencias clave

List:

• Optimizada para grandes cantidades de datos
• Carga filas de forma eficiente
• Soporta edición nativa (swipe, delete, reorder)
• Estilo automático del sistema

ScrollView + VStack:

• Más control visual
• No optimizada para miles de elementos
• No incluye edición por defecto
• Mejor para layouts personalizados

Regla práctica:
Usa List cuando estés mostrando datos. Usa ScrollView cuando estés creando layouts.

Creando tu primer List en SwiftUI

Vamos a empezar con el caso más sencillo: una lista con datos estáticos.

Ejemplo básico

struct ContentView: View {
    var body: some View {
        List {
            Text("Manzana")
            Text("Plátano")
            Text("Naranja")
        }
    }
}

Este código crea una lista con tres filas. Cada Text se convierte automáticamente en una fila de la lista.

Si ejecutas este proyecto en Xcode, verás:

• Un fondo blanco (o gris según el estilo)
• Separadores entre filas
• Scroll automático si la lista crece

List con datos dinámicos

El verdadero poder de List aparece cuando trabajamos con colecciones de datos.

Usando un array simple

struct ContentView: View {
    let frutas = ["Manzana", "Plátano", "Naranja"]

    var body: some View {
        List(frutas, id: \.self) { fruta in
            Text(fruta)
        }
    }
}

Aquí sucede algo importante:

• List recibe una colección (frutas)
• El parámetro id: \.self indica cómo identificar cada elemento
• SwiftUI necesita un identificador único para cada fila

El protocolo Identifiable

Cuando trabajas con modelos más complejos, es recomendable usar Identifiable.

Ejemplo de modelo

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

Uso en List

struct ContentView: View {
    let frutas = [
        Fruta(nombre: "Manzana", color: "Rojo"),
        Fruta(nombre: "Plátano", color: "Amarillo"),
        Fruta(nombre: "Naranja", color: "Naranja")
    ]

    var body: some View {
        List(frutas) { fruta in
            Text(fruta.nombre)
        }
    }
}

Gracias a Identifiable, ya no es necesario pasar id: manualmente.

Personalizando las filas

Una fila de List no tiene por qué ser solo un Text. Puede ser cualquier vista.

Fila con HStack

List(frutas) { fruta in
    HStack {
        Circle()
            .fill(Color.red)
            .frame(width: 12, height: 12)

        Text(fruta.nombre)
            .font(.headline)

        Spacer()

        Text(fruta.color)
            .foregroundColor(.secondary)
    }
}

Esto permite crear filas ricas visualmente, similares a las que vemos en apps profesionales.

Separadores y estilos de lista

SwiftUI adapta el estilo de la lista automáticamente, pero puedes cambiarlo.

Cambiar estilo de lista

List(frutas) { fruta in
    Text(fruta.nombre)
}
.listStyle(.plain)

Otros estilos comunes:

• .inset
• .insetGrouped
• .grouped
• .sidebar (macOS / iPad)

El estilo correcto depende del tipo de app que estés construyendo.

Secciones en List

Las secciones permiten agrupar datos, algo muy común en ajustes o catálogos.

Ejemplo con secciones

List {
    Section(header: Text("Frutas")) {
        Text("Manzana")
        Text("Plátano")
    }

    Section(header: Text("Verduras")) {
        Text("Zanahoria")
        Text("Lechuga")
    }
}

También puedes usar secciones con datos dinámicos:

List {
    Section(header: Text("Frutas")) {
        ForEach(frutas) { fruta in
            Text(fruta.nombre)
        }
    }
}

Interacciones: eliminar filas

Una de las grandes ventajas de List es que soporta edición nativa.

Eliminar elementos

@State private var frutas = ["Manzana", "Plátano", "Naranja"]

var body: some View {
    List {
        ForEach(frutas, id: \.self) { fruta in
            Text(fruta)
        }
        .onDelete { indexSet in
            frutas.remove(atOffsets: indexSet)
        }
    }
}

Con esto, el usuario puede deslizar una fila para eliminarla.

Reordenar filas

También es muy sencillo permitir que el usuario cambie el orden.

.onMove { indices, newOffset in
    frutas.move(fromOffsets: indices, toOffset: newOffset)
}

Y para activar el modo edición:

.navigationBarItems(trailing: EditButton())

Navegación con List y NavigationStack

List se integra perfectamente con la navegación.

Ejemplo con navegación

NavigationStack {
    List(frutas) { fruta in
        NavigationLink(fruta.nombre) {
            Text("Detalle de \(fruta.nombre)")
        }
    }
    .navigationTitle("Frutas")
}

Este patrón es extremadamente común en apps iOS.

List y estado (@State, @Binding, @ObservedObject)

List funciona de forma reactiva:

• Si los datos cambian → la lista se actualiza
• No necesitas recargar manualmente

Ejemplo con @State:

@State private var frutas = ["Manzana", "Plátano"]

Button("Añadir") {
    frutas.append("Nueva fruta")
}

La nueva fila aparece automáticamente.

Buenas prácticas al usar List

1. Usa Identifiable siempre que sea posible
2. Evita lógica compleja dentro de la fila
3. Extrae filas a sub-vistas para mejorar legibilidad
4. No abuses de onAppear dentro de listas grandes
5. Elige el estilo adecuado según la plataforma

Errores comunes

• Usar List para layouts complejos (mejor ScrollView)
• No proporcionar identificadores únicos
• Mutar datos sin @State o @ObservableObject
• Sobrecargar las filas con demasiadas vistas

Conclusión

List es uno de los pilares de SwiftUI. Representa la forma estándar, eficiente y elegante de mostrar datos estructurados en aplicaciones Apple. Gracias a su enfoque declarativo, su integración con el sistema de estados y su soporte nativo para edición y navegación, List permite construir interfaces potentes con muy poco código.

Dominar List es un paso fundamental para cualquier desarrollador SwiftUI. Una vez entiendes cómo funciona, puedes centrarte en lo realmente importante: los datos y la experiencia de usuario, dejando que SwiftUI se encargue del resto.

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