LazyVerticalGrid-gallerier
Arrangér elementer i et scrollbar gitter.
LazyVerticalGrid-gallerier er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Gitre i Compose
Når en skærm fuld af billeder har brug for pæne rækker og kolonner, skal du bruge LazyVerticalGrid. Den ruller lodret og komponerer kun de celler, du kan se. 🖼️
Hvorfor Lazy?
Ligesom LazyColumn springer et lazy-gitter elementer uden for skærmen over. Et galleri med tusind billeder forbliver jævnt, fordi Compose bygger celler efter behov og ikke alle på én gang.
Den grundlæggende opsætning
Du angiver et antal kolonner til LazyVerticalGrid og giver den items. Hvert element bliver til én celle, og Compose placerer dem fra venstre mod højre og derefter nedad.
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
items(photos) { photo ->
PhotoCell(photo)
}
}GridCells.Fixed
Brug GridCells.Fixed(n), når du vil have et præcist antal kolonner, f.eks. et ryddeligt ikon-gitter med tre kolonner, der aldrig ændrer sig.
columns = GridCells.Fixed(3)Afstand mellem celler
Skab luft med Arrangement-parametre. De styrer afstanden mellem rækker og afstanden mellem kolonner hver for sig.
LazyVerticalGrid(
columns = GridCells.Fixed(2),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }Indvendig afstand omkring gitteret
Brug contentPadding til at give hele gitteret indvendig afstand fra skærmens kanter. Så ligger den første og sidste celle ikke helt op ad kanten.
contentPadding = PaddingValues(16.dp)Elementer fra en liste
Builderen items tager din dataliste og en celle-lambda. Hvert element på listen knyttes til præcis én komponeret celle.
items(galleryPhotos) { photo ->
AsyncImage(model = photo.url, contentDescription = null)
}En enkelt særlig celle
Har du brug for en overskrift eller en enkeltstående celle? Brug item (ental) til indhold, der ikke skal gentages for hele listen.
item { GalleryTitle() }
items(photos) { PhotoCell(it) }Spænd over flere kolonner
En celle kan strække sig over hele rækken med en span. Det er perfekt til en sektionsoverskrift over dens billeder.
item(span = { GridItemSpan(maxLineSpan) }) {
SectionHeader("Recent")
}Hold cellerne kvadratiske
Fotogallerier ser bedst ud, når cellerne er kvadratiske. Anvend aspectRatio(1f) på hver celle, så højden følger bredden.
Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }Gitter eller liste
Vælg et gitter, når elementerne er visuelle og lige vigtige, f.eks. miniaturebilleder. Vælg en liste, når hver række er en særskilt post i fuld bredde.
Hurtigt tjek
Et hurtigt spørgsmål om antal kolonner.
Opsummering: Gittergallerier
Du har mødt LazyVerticalGrid: lazy-celler, et antal kolonner, afstand, indvendig afstand og spænd. Det er dit oplagte valg til rullende fotogallerier. ✨
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “LazyVerticalGrid-gallerier” gratis?
Ja — hele teksten til “LazyVerticalGrid-gallerier” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “LazyVerticalGrid-gallerier”?
Arrangér elementer i et scrollbar gitter. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “LazyVerticalGrid-gallerier”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- LazyVerticalGrid-gallerier
- LazyRow til karuseller
- Adaptive kontra faste gitterceller
- Scroll-state og programmatisk scrolling