Swift Academy · Lektion

LazyVGrid och LazyHGrid

Bygg responsiva rutnätslayouter med fasta, flexibla och adaptiva kolumner med GridItem.

Lektion 2 av 412 steg

LazyVGrid och LazyHGrid är en gratis lektion i Swift Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Swift Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Swift Academy innehåller totalt 4 lektioner.

Välkommen

`LazyVGrid` och `LazyHGrid` tillhandahåller gridlayouter med anpassningsbara kolumn- eller raddefinitioner med hjälp av `GridItem`. De passar perfekt för gallerier, kataloger och kortlayouter.

GridItem-typer

• `.fixed(size)` — fast pixelstorlek • `.flexible(min:max:)` — fyller det tillgängliga utrymmet • `.adaptive(minimum:maximum:)` — så många kolumner som får plats

Enkel LazyVGrid

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

Fasta kolumner

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

Blandade GridItem-typer

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Kombinera typer för layouter i Pinterest-stil.

LazyHGrid

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

justering och avstånd

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

Sektionsrubriker i rutnät

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

Valet mellan Adaptive och Fixed

• `.adaptive` — bäst för bildrutnät och dynamiskt innehåll • `.fixed` — när exakt kontroll behövs • `.flexible` — fyller ut jämnt, som en CSS flexbox-kolumn

Prestanda med lazy-laddning

Prefixet `Lazy` innebär att endast synliga celler renderas — avgörande för långa listor. Utan lazy skapas alla objekt direkt.

Snabbkontroll

Vilken typ av `GridItem` skapar så många kolumner som får plats med en minsta bredd?

Sammanfattning

Viktiga punkter: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` för rutnätslayouter • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` för klistrade rubriker • Lazy = endast synliga celler renderas • `.adaptive` är enklast för responsiva rutnät Nästa: Spacer, padding och frame.
Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
122
Lektioner
409

Vanliga frågor

Är lektionen ”LazyVGrid och LazyHGrid” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Swift Academy, inklusive ”LazyVGrid och LazyHGrid”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Swift Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”LazyVGrid och LazyHGrid”?

Bygg responsiva rutnätslayouter med fasta, flexibla och adaptiva kolumner med GridItem. Ni övar på Swift Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Swift Academy?

Du behöver inga förkunskaper. Utbildningen i Swift Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”LazyVGrid och LazyHGrid”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Swift Academy-lektionen?

Ja. Varje Swift Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Grunderna i VStack, HStack och ZStack
  2. LazyVGrid och LazyHGrid
  3. Spacer-, padding- och frame-modifierare
  4. GeometryReader för adaptiva layouter
← Tillbaka till Swift Academy