Galeries LazyVerticalGrid
Disposez les éléments dans une grille déroulable.
Galeries LazyVerticalGrid est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. ✨
Apprends Kotlin avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Galeries LazyVerticalGrid » est-elle gratuite ?
Oui — le texte complet de « Galeries LazyVerticalGrid » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Galeries LazyVerticalGrid » ?
Disposez les éléments dans une grille déroulable. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Galeries LazyVerticalGrid » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Galeries LazyVerticalGrid
- LazyRow pour les carrousels
- Cellules de grille adaptatives ou fixes
- État de défilement et défilement programmatique