Disposição e Alinhamento
Posicione e distribua o espaço entre os elementos filhos com precisão.
Disposição e Alinhamento é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 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 Words, Two Jobs
Layout control comes down to arrangement and alignment. They sound similar but they do different jobs. Let's untangle them. 🧭
Arrangement: Along the Main Axis
Arrangement controls spacing along the layout's main axis: vertical for a Column, horizontal for a Row.
Alignment: Across the Cross Axis
Alignment controls position on the other axis: horizontal in a Column, vertical in a Row. It lines children up sideways.
Grouping at One End
Arrangement.Top, Center, and Bottom pack children together at one end of a Column, leaving the rest as empty space.
Column(verticalArrangement = Arrangement.Center) {
Text("A")
Text("B")
}Spreading Children Out
Use SpaceBetween, SpaceAround, or SpaceEvenly to distribute extra space among children instead of bunching them up.
Row(horizontalArrangement = Arrangement.SpaceEvenly) {
Text("A")
Text("B")
Text("C")
}SpaceBetween vs SpaceEvenly
SpaceBetween hugs the edges with no outer gaps, while SpaceEvenly adds equal gaps everywhere, including before the first and after the last child.
Fixed Gaps with spacedBy
For a consistent gap, use Arrangement.spacedBy. It inserts the exact distance you give between every adjacent child.
Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
Text("A")
Text("B")
}Column's Cross-Axis Alignment
In a Column the cross axis is horizontal, so horizontalAlignment chooses Start, CenterHorizontally, or End for the children.
Column(horizontalAlignment = Alignment.End) {
Text("Right side")
}Row's Cross-Axis Alignment
In a Row the cross axis is vertical, so verticalAlignment picks Top, CenterVertically, or Bottom for the children.
Row(verticalAlignment = Alignment.Bottom) {
Text("Aligned bottom")
}Combine Both for Layout
You usually set both at once: arrangement spaces children along the main axis while alignment positions them on the cross axis.
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }Effect Needs Extra Space
Arrangement only shows when the container is bigger than its children. A wrap-content Column has no spare room to redistribute.
Quick Check
Let's confirm which axis each setting controls.
Recap: Arrangement & Alignment
You learned the split: arrangement spaces children along the main axis, alignment positions them on the cross axis. Combine both for precise layouts.
Perguntas Frequentes
A aula “Disposição e Alinhamento” é grátis?
Sim — o texto completo de “Disposição e Alinhamento” é 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 “Disposição e Alinhamento”?
Posicione e distribua o espaço entre os elementos filhos com precisão. 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 4 de 4.
Quanto tempo leva a aula “Disposição e Alinhamento”?
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
- Column: Empilhando Elementos Verticalmente
- Row: Colocando Elementos Lado a Lado
- Box: Sobrepondo Camadas
- Disposição e Alinhamento