Box: Sobrepondo Camadas
Empilhe conteúdo com controle de alinhamento.
Box: Sobrepondo Camadas é 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.
Stacking on Top
When children should overlap rather than line up, you use a Box. It layers content on the same spot. 🗂️
Your First Box
A Box draws its children in order, each one on top of the previous. Later children sit above earlier ones, like stacked cards.
Box {
Image(painter, null)
Text("Caption")
}Z-Order Follows Source Order
The last child you write wins the top layer. So to put a label over a photo, place the Image first and the Text after it.
Box Sizes to Its Biggest Child
By default a Box wraps its largest child. The other children are positioned within that footprint instead of expanding it.
Aligning the Whole Box
The contentAlignment parameter sets a default spot for every child. Alignment.Center pulls them all to the middle of the Box.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Aligning One Child
Inside a Box, each child can use the align modifier to override the default. This is how you pin one item to a corner.
Box {
Text("Top end", Modifier.align(Alignment.TopEnd))
}A Badge in the Corner
Overlap plus align gives you a classic badge: an avatar fills the Box while a small dot pins to the TopEnd corner.
Box {
Avatar()
Dot(Modifier.align(Alignment.TopEnd))
}Text Over an Image
A common pattern is a caption over a photo. Put the Image first, then align Text to BottomStart so it reads over the image.
Box {
Image(painter, null)
Text("Sunset", Modifier.align(Alignment.BottomStart))
}Filling and Backgrounds
Make a Box fill space with fillMaxSize, then add a background color. It becomes a handy layered container for a whole screen.
Box(Modifier.fillMaxSize().background(Color.Black)) {
Text("Hi")
}The Nine Alignment Spots
A Box offers nine alignment positions, from TopStart to BottomEnd, with Center in the middle. They cover every placement you need.
When to Reach for Box
Choose Box whenever pieces share the same area: overlays, badges, captions, or a spinner centered over content. It is your layering tool.
Quick Check
Let's confirm how a Box layers its children.
Recap: Box
You learned Box: it stacks children on the same spot in source order, sizes to its biggest child, and uses contentAlignment and align to place them.
Perguntas Frequentes
A aula “Box: Sobrepondo Camadas” é grátis?
Sim — o texto completo de “Box: Sobrepondo Camadas” é 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 “Box: Sobrepondo Camadas”?
Empilhe conteúdo com controle de alinhamento. 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 “Box: Sobrepondo Camadas”?
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