LazyGrid

LazyGrid

Les LazyGrid sont des structures de données qui chargent et affichent des éléments de manière « paresseuse« , c’est-à-dire à la demande. Au lieu de charger tous les éléments d’une collection en mémoire dès le départ, une grille paresseuse ne charge que les éléments nécessaires pour l’affichage actuel à l’écran (Comme pour le LazyStack mais en forme de grille cette fois). Lorsque l’utilisateur fait défiler la vue, de nouveaux éléments sont chargés et rendus à la volée, tandis que ceux qui sortent de la vue peuvent être déchargés. Cette approche optimise les ressources système, réduit la consommation de mémoire et améliore les performances globales de l’application.

GridItem

Un GridItem représente la configuration d’une colonne dans une grille verticale LazyVGrid ou d’une rangée dans une grille horizontale LazyHGrid. Tu peux définir plusieurs aspects d’un GridItem, tels que sa taille, son espacement avec les autres éléments de la grille, et son mode de redimensionnement. En ajustant ces paramètres, tu peux créer des grilles personnalisées qui s’adaptent parfaitement à ton contenu et à tes exigences de design.

let columns: [GridItem] = [
    GridItem(.fixed(100)),
    GridItem(.fixed(100)),
    GridItem(.fixed(100))    
  ]

Le tableau [GridItem] sert à configurer notre grille. Chaque instance de GridItem correspond à une colonne ou une ligne, déterminant ainsi la structure de la grille. Dans notre exemple, avec trois GridItem ayant chacun une taille fixe de 100 points, nous définissons une grille composée de trois colonnes. Ca fonctionne de la même façon pour une grille horizontal.

Il existe trois types principaux de GridItem, chacun avec son propre mode de fonctionnement et cas d’utilisation : .fixed, <span style="color: #1f1f24;">.flexible</span>, et .adaptive. Comprendre quand et comment utiliser ces différents types est essentiel pour créer des interfaces utilisateur efficaces et esthétiques.

→ .fixed(CGFloat)

Le type .fixed spécifie une taille fixe en points pour la largeur des colonnes ou la hauteur des rangées. Utilise ce type lorsque tu souhaite que les éléments de ta grille aient une dimension constante, indépendamment de la taille de l’écran ou du contenu.

→ .flexible(min: CGFloat = 0, max: CGFloat = .infinity)

Le type <span style="color: #1f1f24;">.flexible</span> permet aux colonnes ou rangées de s’étendre pour occuper l’espace disponible, avec des limites minimale et maximale optionnelles. Si plusieurs colonnes ou rangées sont définies comme flexibles, elles se partageront l’espace disponible de manière égale.

→ .adaptive(minimum: CGFloat, maximum: CGFloat = .infinity)

Le type <span style="color: #1f1f24;">.adaptive</span> crée autant de colonnes ou rangées que possible en fonction de la taille minimum spécifiée, ajustant le nombre d’éléments par ligne ou colonne selon la largeur ou la hauteur disponible. Les éléments excédentaires passent automatiquement à la ligne ou colonne suivante.

LazyVGrid

LazyVGrid est utilisé pour créer une grille verticale où les lignes sont chargées de manière paresseuse. Tu peux spécifier le nombre de colonnes, leur taille et l’espacement entre les éléments de la grille. Il est utile pour afficher une collection d’éléments dans une grille verticale qui s’adapte à la taille de l’écran et au contenu.

struct LazyVGridView: View {
    let columns: [GridItem] = [
        GridItem(.fixed(100)),
        GridItem(.fixed(100)),
        GridItem(.fixed(100))   
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(symbols, id: \.self) { symbol in
                    Image(systemName: symbol)
                        .font(.largeTitle)
                        .frame(width: 100, height: 100)
                        .background(Color.orange.secondary, in: RoundedRectangle(cornerRadius: 10))
                    
                }
            }
            .padding(.horizontal)
        }
    }
}

LazyHGrid

LazyHGrid est utilisé pour créer une grille horizontale où les colonnes sont chargées de manière paresseuse. Semblable à LazyVGrid, tu peux spécifier le nombre de rangées, leur taille et l’espacement entre les éléments. Ce composant est idéal pour afficher une collection d’éléments dans une grille horizontale.

struct LazyHGridView: View {
    let rows: [GridItem] = [
        GridItem(.fixed(100)),
        GridItem(.fixed(100)),
        GridItem(.fixed(100))
    ]
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows, spacing: 20) {
                ForEach(symbols, id: \.self) { symbol in
                    Image(systemName: symbol)
                        .font(.largeTitle)
                        .frame(width: 100, height: 100)
                        .background(Color.orange.secondary, in: RoundedRectangle(cornerRadius: 10))
                }
            }
            .padding(.vertical)
        }
    }
}

Grille personnalisé

struct LazyVGridView: View {
    let columns: [GridItem] = [
         GridItem(.fixed(50)),
         GridItem(.flexible(minimum: 50, maximum: 300)),
         GridItem(.adaptive(minimum: 100, maximum: 150))
     ]
     
     var body: some View {
         ScrollView {
             LazyVGrid(columns: columns, spacing: 20) {
                 ForEach(symbols, id: \.self) { symbol in
                     Image(systemName: symbol)
                     
                         .font(.title)
                         .frame(minWidth: 50, idealWidth: 100, maxWidth: 100, minHeight: 50, idealHeight: 50, maxHeight: 50)
                         .background(Color.orange.secondary, in: RoundedRectangle(cornerRadius: 10))
                    
                 }
             }
             .padding(.horizontal)
         }
         .padding()
     }
 }