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.
Tabla de contenido
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 para nuestro List en SwiftUI
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
}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")
]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)
}
}
}
}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)
}
}
}
}
}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())
}
}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())
}
}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())
}
}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
