Jetpack Compose Academy · Leçon

Box : superposer et faire chevaucher

Empilez le contenu en contrôlant son alignement.

Box : superposer et faire chevaucher est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Box : superposer et faire chevaucher » est-elle gratuite ?

Oui — le texte complet de « Box : superposer et faire chevaucher » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Box : superposer et faire chevaucher » ?

Empilez le contenu en contrôlant son alignement. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Box : superposer et faire chevaucher » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Jetpack Compose Academy