Células de Grade Adaptáveis e Fixas
Faça as grades se adaptarem à largura da tela.
Células de Grade Adaptáveis e Fixas é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 3 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.
Two Ways to Size Cells
A grid needs to know how wide its columns are. Compose offers two strategies: Fixed column counts and Adaptive minimum widths. 📐
Fixed Recap
You already met GridCells.Fixed(n). It always shows n columns, so cells grow or shrink to fit the screen width.
columns = GridCells.Fixed(3)The Problem With Fixed
On a phone, 3 columns look great. On a tablet, those same 3 columns become awkwardly wide. Fixed does not adapt to bigger screens.
Enter Adaptive
With GridCells.Adaptive(minSize), you specify a minimum cell width. Compose fits as many columns as possible, then stretches them to fill.
columns = GridCells.Adaptive(minSize = 120.dp)How Adaptive Counts
Compose divides the available width by your minSize to decide the column count. A wider screen simply gets more columns, automatically.
Responsive by Default
Adaptive grids look right on phones, foldables, and tablets without any extra code. One minSize value handles every screen. 📱
Choosing a minSize
Pick a minSize that keeps content readable at its smallest. Too tiny and cells feel cramped; too large and small phones show one column.
GridCells.Adaptive(minSize = 96.dp)When Fixed Still Wins
Use Fixed when the design demands an exact count, like a 7-day calendar week that must always be 7 columns wide.
GridCells.Fixed(7)Mixing With Spacing
Both strategies pair with arrangements. The minSize in Adaptive is measured before spacing, so leave room for your gaps.
LazyVerticalGrid(
columns = GridCells.Adaptive(120.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }LazyHorizontalGrid Too
The same Fixed and Adaptive cells work in LazyHorizontalGrid, which scrolls sideways and fills rows top to bottom.
LazyHorizontalGrid(rows = GridCells.Adaptive(80.dp)) { }A Simple Rule
Default to Adaptive for content galleries so they scale across devices. Reserve Fixed for layouts that need a precise, meaningful column count.
Quick Check
Pick the responsive choice.
Recap: Sizing Cells
You compared Fixed exact counts with Adaptive minimum widths. Adaptive scales across devices; Fixed locks an intentional column count. 🎯
Perguntas Frequentes
A aula “Células de Grade Adaptáveis e Fixas” é grátis?
Sim — o texto completo de “Células de Grade Adaptáveis e Fixas” é 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 “Células de Grade Adaptáveis e Fixas”?
Faça as grades se adaptarem à largura da tela. 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 3 de 4.
Quanto tempo leva a aula “Células de Grade Adaptáveis e Fixas”?
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