Galerías con LazyVerticalGrid
Organice elementos en una grid desplazable.
Galerías con LazyVerticalGrid es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. ✨
Preguntas frecuentes
¿La lección «Galerías con LazyVerticalGrid» es gratis?
Sí — el texto completo de «Galerías con LazyVerticalGrid» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Galerías con LazyVerticalGrid»?
Organice elementos en una grid desplazable. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Galerías con LazyVerticalGrid»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Galerías con LazyVerticalGrid
- LazyRow para carruseles
- Celdas de grid adaptativas frente a fijas
- Estado de desplazamiento y desplazamiento programático