SwiftUI Academy · Lektion

Adaptiva rutnät med LazyVGrid

Placera kort i flexibla rutnätskolumner.

Lektion 3 av 413 steg

Adaptiva rutnät med LazyVGrid är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Varför ett grid?

Stacks ger dig rader eller kolumner, men en LazyVGrid ordnar objekt i prydliga rader och kolumner, som i ett fotoalbum. 🖼️

Definiera kolumnerna

En LazyVGrid behöver en kolumnarray med GridItem-värden som beskriver hur många spår som ska läggas ut.

let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
    ForEach(items) { Cell($0) }
}

Flexibla objekt

En GridItem(.flexible()) sträcks ut för att dela utrymmet jämnt, så två flexibla objekt skapar två lika breda kolumner.

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

Spår med fast bredd

Använd GridItem(.fixed(80)) när du vill att en kolumn ska vara exakt 80 punkter bred oavsett skärm.

let columns = [GridItem(.fixed(80))]

Verkligt adaptiv

Det magiska alternativet är .adaptive(minimum:): det får plats med så många kolumner som möjligt och anpassar sig till alla skärmstorlekar.

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

Alltid inuti en ScrollView

Lägg din LazyVGrid i en ScrollView så att gridden kan växa förbi skärmen och läsa in celler lazy.

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { Cell($0) }
    }
}

Avstånd mellan celler

Finjustera mellanrummen med ett spacing-argument på gridden och på varje GridItem för prydliga, balanserade celler.

LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { Cell($0) }
}

Celler är bara vyer

Varje objekt i ForEach blir en cell, så vilken vy som helst fungerar: en bild, ett kort eller en knapp med etikett.

ForEach(photos) { photo in
    Image(photo.name)
        .resizable()
}

Lazy redan i namnet

Precis som andra lazy-containrar bygger LazyVGrid celler när de rullar in, så att stora gallerier förblir smidiga.

Den horisontella kusinen

Behöver du kolumner med fasta rader som rullar i sidled? LazyHGrid är den horisontella motsvarigheten med samma GridItem-API.

Responsiva layouter

Ett adaptivt grid ser bra ut på både en telefon och en iPad, eftersom kolumnerna automatiskt flödar om för att fylla utrymmet. ✨

Snabb kontroll

Tänk på vilket GridItem som reagerar på skärmstorleken.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du lärde dig att bygga flexibla, fasta och adaptiva gridar med LazyVGrid i en ScrollView för responsiva layouter. 🎉

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: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Adaptiva rutnät med LazyVGrid” gratis?

Ja – hela texten till ”Adaptiva rutnät med LazyVGrid” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Adaptiva rutnät med LazyVGrid”?

Placera kort i flexibla rutnätskolumner. Ni övar på SwiftUI 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 SwiftUI Academy?

Du behöver inga förkunskaper. Utbildningen i SwiftUI 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 3 av 4.

Hur lång tid tar lektionen ”Adaptiva rutnät med LazyVGrid”?

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 SwiftUI Academy-lektionen?

Ja. Varje SwiftUI 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

← Tillbaka till SwiftUI Academy