0Pricing
Swift Academy · Lezione

LazyVGrid e LazyHGrid

Creare layout a griglia reattivi con colonne GridItem fisse, flessibili e adattive.

LazyVGrid e LazyHGrid è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.

Benvenuto

`LazyVGrid` e `LazyHGrid` forniscono layout a griglia con definizioni personalizzabili di colonne o righe tramite `GridItem`. Sono ideali per gallerie, cataloghi e layout a schede.

Tipi di GridItem

• `.fixed(size)`: dimensione fissa in pixel • `.flexible(min:max:)`: riempie lo spazio disponibile • `.adaptive(minimum:maximum:)`: crea il maggior numero possibile di colonne

LazyVGrid di base

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

Colonne fisse

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

Tipi misti di GridItem

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Combini i tipi per creare layout in stile Pinterest.

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

allineamento e spaziatura

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

Intestazioni di sezione nella griglia

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

Scelta tra adaptive e fixed

• `.adaptive` — ideale per griglie di foto e contenuti dinamici • `.fixed` — quando è necessario un controllo preciso • `.flexible` — riempie lo spazio in modo uniforme, come una colonna CSS flexbox

Prestazioni del caricamento lazy

Il prefisso `Lazy` indica che vengono visualizzate solo le celle visibili: è fondamentale per gli elenchi lunghi. Senza lazy, tutti gli elementi vengono creati in anticipo.

Verifica rapida

Quale tipo di `GridItem` crea il maggior numero possibile di colonne che rientrano in una larghezza minima?

Riepilogo

Concetti chiave: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` per i layout a griglia • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` per intestazioni fisse • Lazy = vengono visualizzate solo le celle visibili • `.adaptive` è la soluzione più semplice per le griglie responsive Prossimo argomento: Spacer, padding e frame.

Domande Frequenti

La lezione «LazyVGrid e LazyHGrid» è gratuita?

Sì — il testo completo di «LazyVGrid e LazyHGrid» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.

Cosa imparerò in «LazyVGrid e LazyHGrid»?

Creare layout a griglia reattivi con colonne GridItem fisse, flessibili e adattive. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Swift Academy?

Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «LazyVGrid e LazyHGrid»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Swift Academy?

Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Fondamenti di VStack, HStack e ZStack
  2. LazyVGrid e LazyHGrid
  3. Modifier Spacer, Padding e Frame
  4. GeometryReader per layout adattivi
← Torna a Swift Academy