En capítulos anteriores analizamos o uso de pilas (Stacks) ou listas (List) para presentar información ao usuario.

• Ningunha destas solucións é particularmente útil para mostrar contido en formato de cuadrícula.
• Coa introdución de iOS 15, SwiftUI agora inclúe tres vistas co fin de mostrar cuadrículas multicolumnas: LazyVGrid, LazyHGrid e Gridltem.

Grids #

A cuadrícula (Grid) de SwiftUl proporciona unha forma de mostrar información nun deseño multicolumna horizontal ou vertical.

• Cando se incrusta nunha instancia de ScrollView, o usuario poderá desprazarse polo Grid se este se estende máis aló da área visible da pantalla.
• As vistas LazyVGrid e LazyHGrid crean elementos que se mostrarán dentro do Grid cando están a piques de facerse visibles e logo descartan eses elementos da memoria a medida que se desprazan fóra da vista.
• Isto permite construír grids desplazables dun número potencialmente infinito de elementos sen afectar negativamente o rendemento da aplicación.

A sintaxe para declarar unha cuadrícula vertical é a seguinte:

LazyVGrid(columns: [GridItem], alignment: alineación_horizontal, spacing: espazo, pinnedViews: vistas) {
  // Vistas contidas no LazyVGrid
}

Na sintaxe anterior, só o argumento de columnas é obrigatorio un array de elementos GridItem.

Do mesmo xeito, unha cuadrícula horizontal declararíase da seguinte maneira:

LazyHGrid(columns: [GridItem], alignment: alineación_vertical, spacing: espazo, pinnedViews: vistas) {
  // Vistas contidas no LazyHGrid
}

GridItem #

Cada fila ou columna dun grid está representada por unha instancia da vista GridItem.

• A vista GridItem define as propiedades da fila ou columna en termos de comportamento de tamaño, espazado e aliñación.
• A vista GridItem tamén proporciona control sobre o número de filas ou columnas que se mostran dentro dunha cuadrícula e o tamaño mínimo ao que se pode reducir un elemento para cumprir con esas restricións.

Os elementos do grid decláranse utilizando a seguinte sintaxe:

GridItem(sizing, spacing: espazo, alignment: aliñación)

Onde argumento spacing pode ser un dos seguintes:

• .flexible(): O número de filas e columnas no grid dependerá do número de Gridltem no array pasado a LazyVGrid ou LazyHGrid.
• .adaptive(minimum: tamaño_minimo_opcional): O número de filas e columnas axustase para que caiba tantos elementos como sexa posible no espazo dispoñible. O tamaño mínimo ao que se pode reducir o elemento pódese especificar utilizando o argumento mínimo opcional.
• .fixed(size: tamaño): Especifica un tamaño fixo.

Exemplo #

import SwiftUI

struct ContentView: View {
    
    private var colores: [Color] = [.blue,.yellow,.green]
    private var gridItems = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        LazyVGrid(columns: gridItems, spacing: 5) {
            ForEach((0...8), id: \.self) {
                index in
                Celda(index: index, color: colores[index % colores.count])
            }
        }
        .padding(5)
    }
}

struct Celda: View {
    var index:Int
    var color:Color
    
    var body: some View {
        Text("\(index)")
            .frame(minWidth: 50, maxWidth: .infinity, minHeight: 100)
            .background(color)
            .cornerRadius(8)
            .font(.largeTitle)
    }
}

Engadir scroll a un Grid: ScrollView #

O Grid do exemplo anterior contiña un pequeno número de elementos que puideron caber completamente dentro da área de visualización do dispositivo.

Un maior número de elementos fará que o Grid se estenda máis aló da área de pantalla dispoñible.

Por exemplo, se aumentamos o número de elementos do Grid mediante o bucle ForEach de 0 a 99 (no exemplo anterior era de 0 a 9):

• O Grid é demasiado alto para caber completamente na pantalla.
• A pantalla ten o Grid centrado verticalmente, en lugar de comezar na primeira fila, para que os elementos do Grid sexan visibles.
• Non é posible desprazarse cara arriba e cara abaixo para ver o resto do Grid.

import SwiftUI

struct ContentView: View {
    
    private var colores: [Color] = [.blue,.yellow,.green]
    private var gridItems = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        LazyVGrid(columns: gridItems, spacing: 5) {
            ForEach((0...99), id: \.self) {
                index in
                Celda(index: index, color: colores[index % colores.count])
            }
        }
        .padding(5)
    }
}

struct Celda: View {
    var index:Int
    var color:Color
    
    var body: some View {
        Text("\(index)")
            .frame(minWidth: 50, maxWidth: .infinity, minHeight: 100)
            .background(color)
            .cornerRadius(8)
            .font(.largeTitle)
    }
}

ScrollView #

Todos estes problemas pódense abordar simplemente incrustando o LazyVGrid nun ScrollView da seguinte maneira (na captura de pantalla non se aprecia o scroll):

import SwiftUI

struct ContentView: View {
    
    private var colores: [Color] = [.blue,.yellow,.green]
    private var gridItems = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        ScrollView {
          LazyVGrid(columns: gridItems, spacing: 5) {
              ForEach((0...99), id: \.self) {
                  index in
                  Celda(index: index, color: colores[index % colores.count])
              }
          }
          .padding(5)
        }
    }
}

struct Celda: View {
    var index:Int
    var color:Color
    
    var body: some View {
        Text("\(index)")
            .frame(minWidth: 50, maxWidth: .infinity, minHeight: 100)
            .background(color)
            .cornerRadius(8)
            .font(.largeTitle)
    }
}

GridItem adaptativo #

Ata o de agora, vimos como a configuración flexible do tamaño de GridItem permítenos definir cantas columnas ou filas aparecen nun Grid.

A configuración adaptativa configura o Grid para que mostre automaticamente tantas filas ou columnas como poida caber no espazo ocupado pola vista.

Para usar o tamaño adaptativo, definimos o array de GridItem para que conteña un só elemento adaptativo da seguinte maneira:

private var gridItems = [GridItem(.adaptive(minimum: 50))]

Este cambio dará como resultado que o Grid mostre tantas columnas como sexa posible (coa restrición de que o ancho da columna non pode ser inferior a 50 pixeles).