SwiftUI Academy · leksjon

Adaptive rutenett med LazyVGrid

Plasser kort i fleksible rutenettkolonner.

Leksjon 3 av 413 trinn

Adaptive rutenett med LazyVGrid er en gratis leksjon i SwiftUI Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i SwiftUI Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i SwiftUI Academy inneholder totalt 4 leksjoner.

Hvorfor et rutenett

Stacker gir Dem rader eller kolonner, men en LazyVGrid ordner elementer i ryddige rader og kolonner, som i et fotoalbum. 🖼️

Definer kolonnene

En LazyVGrid trenger en kolonnearray med GridItem-verdier som beskriver hvor mange spor som skal legges ut.

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

Fleksible elementer

En GridItem(.flexible()) strekker seg for å dele plassen jevnt, slik at to fleksible elementer gir to like brede kolonner.

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

Spor med fast bredde

Bruk GridItem(.fixed(80)) når De vil at en kolonne alltid skal være nøyaktig 80 punkter bred, uansett skjerm.

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

Virkelig tilpasningsdyktig

Det magiske alternativet er .adaptive(minimum:): det får plass til så mange kolonner som mulig og tilpasser seg alle skjermstørrelser.

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

Alltid inni en ScrollView

Legg LazyVGrid i en ScrollView, slik at rutenettet kan vokse forbi skjermen og laste inn celler trinnvis.

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

Avstand mellom cellene

Juster mellomrommene med et spacing-argument på rutenettet og på hver GridItem for ryddige, balanserte celler.

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

Celler er bare visninger

Hvert element i ForEach blir en celle, så alle visninger fungerer: et bilde, et kort eller en knapp med tekst.

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

Lazy av navn

Som andre lazy-containere bygger LazyVGrid celler når de rulles inn, slik at store gallerier forblir jevne.

Vannrett slektning

Trenger De kolonner med rader med fast størrelse som ruller sidelengs? LazyHGrid er den vannrette motparten med samme GridItem-API.

Responsive oppsett

Én tilpasningsdyktig grid ser flott ut på både en iPhone og en iPad, siden kolonnene automatisk omorganiseres for å fylle plassen. ✨

Rask sjekk

Tenk på hvilken GridItem som reagerer på skjermstørrelsen.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært å bygge fleksible, faste og tilpasningsdyktige rutenett med LazyVGrid i en ScrollView for responsive oppsett. 🎉

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Adaptive rutenett med LazyVGrid» gratis?

Ja – hele teksten i «Adaptive rutenett med LazyVGrid» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av SwiftUI Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i SwiftUI Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Adaptive rutenett med LazyVGrid»?

Plasser kort i fleksible rutenettkolonner. Du øver på SwiftUI Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med SwiftUI Academy?

Ingen tidligere erfaring er nødvendig. SwiftUI Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Adaptive rutenett med LazyVGrid»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne SwiftUI Academy-leksjonen?

Ja. Alle SwiftUI Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til SwiftUI Academy