LazyVGrid y LazyHGrid en SWIFTUI en Español

LazyVGrid y LazyHGrid son dos vistas en SwiftUI que permiten tener un listado de vistas en forma de grid. La única diferencia entre las dos es que LazyVGrid muestra las vistas en vertical y LazyHGrid muestra las vistras en horizontal. Podemos customizar las vistas del grid con distintos tipos de tamaños como veremos a continuación (spoiler: fixed, flexible o adaptive).

LazyVGrid en código

Un tema interesante de LazyVGrid y LazyHGrid es la palabra Lazy, esto significa que van creando las vistas del grid sobre la marcha. Imagínate que tienes 1000 vistas en tu Grid, lo que no es eficiente es cargar las 1000 vistas en memoria ¿por qué? porque no sabes si el user va hacer scroll hasta el final.
Lo que hacemos con Lazy es cargar solo las vistas a medida que el user hace scroll y que sabemos que se van a mostrar.

Vamos a crear un LazyVGrid donde deberemos:

• Un array de datos que queremos mostrar. En nuestro caso será un array del 1 al 500. Por lo tanto tendremos 500 vistas dentro de nuestro LazyVGrid.
• Lo encapsularemos todo dentro de un ScrollView para que el user pueda hacer scroll en caso de querer ir hasta el último elemento.
• Crearemos el GridItem, las instancia de GridItem nos sirven para configurar el layout de las vistas dentro del Grid (tanto si es LazyVGrid o LazyHGrid). Hay 3 tipos de Grid, cada uno con finalidades distintas: fixed, flexible, y adaptative

Tipos de GridItem

fixed, nos sirve para indicar que queremos que la vista dentro del Grid tenga un tamaño fijo, en el siguiente ejemplo añadimos a la constante columns 3 GridItem para indicar que cada columna tiene un tamaño distinto:

let columns = [GridItem(.fixed(120)),
               GridItem(.fixed(80)),
               GridItem(.fixed(140))]

adaptative, en este caso se meteran varias vistas dentro de la fila, usando el tamaño que especifiquemos. Aquí no podemos controlar el número de columnas. Si caben 5 vistas meterá 5 vistas, así de simple, es por eso que solo metemos un elemento en la constante columns:

  let columns = [GridItem(.adaptive(minimum: 20))]

flexible, es distinto al adaptative, en este caso es para una sola vista y aquí podemos controlar el número de columnas que entrarían dentro del Grid, si queremos 3 columnas meteremos 3 GridItem flexible dentro de la constante columns:

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
]

Ahora vamos a juntar todas estas piezas y vamos a ver un ejemplo real:

struct ContentView: View {
    
    var elements = 1...500
    let gridItem = [GridItem(.fixed(40))]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridItem) {
                ForEach(elements, id: \.self) { element in
                    VStack {
                        Circle()
                            .frame(height: 40)
                        Text("\(element)")
                    }
                }
            }
        }
    }
}

Si quisiéramos hacer lo mismo con un LazyHStack, bastaría con hacer unas modificaciones al ScrollView, y al LazyHStack. Quedando un código de la siguiente manera:

struct ContentView: View {
    
    var elements = 1...500
    let gridItem = [GridItem(.fixed(40))]
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: gridItem) {
                ForEach(elements, id: \.self) { element in
                    VStack {
                        Circle()
                            .frame(height: 40)
                        Text("\(element)")
                    }
                }
            }
        }
    }
}

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