Galerie LazyVerticalGrid
Układaj elementy w przewijalnej siatce
Galerie LazyVerticalGrid to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Grids in Compose
When a screen full of photos needs neat rows and columns, you reach for LazyVerticalGrid. It scrolls vertically and only composes the cells you can see. 🖼️
Why Lazy?
Like LazyColumn, a lazy grid skips off-screen items. A thousand-image gallery stays smooth because Compose builds cells on demand, not all at once.
The Basic Setup
You give LazyVerticalGrid a column count and feed it items. Each item becomes one cell, and Compose flows them left to right, then down.
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
items(photos) { photo ->
PhotoCell(photo)
}
}GridCells.Fixed
Use GridCells.Fixed(n) when you want an exact column count, like a tidy 3-across icon grid that never changes.
columns = GridCells.Fixed(3)Spacing Between Cells
Add breathing room with Arrangement parameters. They control the gap between rows and the gap between columns separately.
LazyVerticalGrid(
columns = GridCells.Fixed(2),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }Padding Around the Grid
Use contentPadding to inset the whole grid from the screen edges. It keeps the first and last cells from hugging the borders.
contentPadding = PaddingValues(16.dp)Items From a List
The items builder takes your data list and a cell lambda. Each element of the list maps to exactly one composed cell.
items(galleryPhotos) { photo ->
AsyncImage(model = photo.url, contentDescription = null)
}A Single Special Cell
Need a header or a one-off cell? Use item (singular) for content that should not repeat over your list.
item { GalleryTitle() }
items(photos) { PhotoCell(it) }Spanning Across Columns
A cell can stretch across the whole row with a span. This is perfect for a section title sitting above its photos.
item(span = { GridItemSpan(maxLineSpan) }) {
SectionHeader("Recent")
}Keep Cells Square
Photo galleries look best when cells are square. Apply aspectRatio(1f) to each cell so height tracks its width.
Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }Grid vs List
Choose a grid when items are visual and equally weighted, like thumbnails. Choose a list when each row is a distinct, full-width record.
Quick Check
A quick one on column counts.
Recap: Grid Galleries
You met LazyVerticalGrid: lazy cells, a column count, spacing, padding, and spans. It is your go-to for scrollable photo galleries. ✨
Często zadawane pytania
Czy lekcja „Galerie LazyVerticalGrid” jest bezpłatna?
Tak — pełny tekst „Galerie LazyVerticalGrid” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Galerie LazyVerticalGrid”?
Układaj elementy w przewijalnej siatce Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?
Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Galerie LazyVerticalGrid”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?
Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Galerie LazyVerticalGrid
- LazyRow dla karuzel
- Adaptacyjne a stałe komórki siatki
- Stan przewijania i przewijanie programowe