LIST en SWIFTUI en Español
List en SwiftUI o Tablas en SwiftUI

LIST en SWIFTUI en Español

List en SwiftUI 3.0 es una vista que nos permite listar colecciones de datos con una vista. Por lo tanto dentro de un List habrá tantas subvistas como elementos tenga la colección.

SwiftBeta
Aprende SwiftUI desde cero

List en SwiftUI es una vista que nos permite mostrar varias subvistas en su interior en forma de listado. A List le tenemos que pasar 2 cosas: una colección de datos y la manera visual en la que los queremos que se muestren.

Creando los datos

Lo primero de todo que vamos a hacer es crear estos datos. Imagínate que tenemos un listado de varios devices, de varios dispositivos que tiene un user, queremos mostrar los que tiene en casa y los que tiene en el trabajo, por ejemplo: un portatil, pantallas, un ipad, un apple tv, etc. Para ello creamos dos colecciones, una que represente los devices que tiene en su casa y otra colección que represente qué devices tiene en el trabajo.

Para ello creamos una struct que defina la información de cada Device

struct Device {
    let title: String
    let imageName: String
}
Struct Device en Swift

a continuación creamos los devices en cada lugar:

let house = [
    Device(title: "Laptop", imageName: "laptopcomputer"),
    Device(title: "Mac mini", imageName: "macmini"),
    Device(title: "Mac Pro", imageName: "macpro.gen3"),
    Device(title: "Pantallas", imageName: "display.2"),
    Device(title: "Apple TV", imageName: "appletv")
]

let work = [
    Device(title: "iPhone", imageName: "iphone"),
    Device(title: "iPad", imageName: "ipad"),
    Device(title: "Airpods", imageName: "airpods"),
    Device(title: "Apple Watch", imageName: "applewatch")
]
Array de devices

List en código

Si quisiéramos representar estos datos dentro de un List, haríamos lo siguiente

struct ContentView: View {
    var body: some View {
        List {
            ForEach(house + work, id: \.title) { option in
               Label(option.title, systemImage: option.imageName)
            }
        }
    }
}
Código para crear un List en SwiftUI

Con el id que tenemos dentro del ForEach ayudamos a SwiftUI a identificar cada elemento de la lista. Si tuvieramos títulos con el mismo nombre deberíamos conformar el protocolo identifiable en la struct que hemos creado con el nombre  Devices, y al conformarlo nos obligaria a crear una propiedad id ya que es un requerimiento para poderlo usarlo. Esta propiedad id se le asignaria un valor único para ese elemento del listado. Esto lo veremos más en detalle en otro vídeo.

Al compilar el código vemos que se están mostrando todos los devices en un mismo listado, pero si los quiésieramos separar los dividiríamos en secciones, justo como lo que vimos con los Forms.
Vamos a crear dos secciones con dos headers:

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Home")) {
                ForEach(house, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
            Section(header: Text("Work")) {
                ForEach(work, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
        }
    }
}
Código para crear un List con dos secciones en SwiftUI

De esta manera hemos puesto una primera sección con los devices de un user que tiene en su casa, y el siguiente listado muestra los devices que tiene en su trabajo. Para que quede más claro hemos añadido títulos a cada sección.

Tipos de listStyle

Por último me gustaría mostraros 3 tipos de listStyle que podemos aplicar a nuestro List.

SidebarListStyle

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Home")) {
                ForEach(house, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
            Section(header: Text("Work")) {
                ForEach(work, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
        }
        .listStyle(SidebarListStyle())
    }
}
Estilo SidebarListStyle de List en SwiftUI

GroupedListStyle

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Home")) {
                ForEach(house, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
            Section(header: Text("Work")) {
                ForEach(work, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
        }
        .listStyle(GroupedListStyle())
    }
}
Estilo GroupedListStyle de List en SwiftUI

InsetGroupedListStyle

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Home")) {
                ForEach(house, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
            Section(header: Text("Work")) {
                ForEach(work, id: \.title) { option in
                    Label(option.title, systemImage: option.imageName)
                }
            }
        }
        .listStyle(InsetGroupedListStyle())
    }
}
Estilo InsetGroupedListStyle de List en SwiftUI

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero