Galerias com LazyVerticalGrid
Organize itens em uma grade rolável.
Galerias com LazyVerticalGrid é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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. ✨
Perguntas Frequentes
A aula “Galerias com LazyVerticalGrid” é grátis?
Sim — o texto completo de “Galerias com LazyVerticalGrid” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Galerias com LazyVerticalGrid”?
Organize itens em uma grade rolável. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Galerias com LazyVerticalGrid”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Galerias com LazyVerticalGrid
- LazyRow para Carrosséis
- Células de Grade Adaptáveis e Fixas
- Estado de Rolagem e Rolagem Programática