Jetpack Compose Academy · Lekcja

Box: warstwy i nakładanie

Układaj zawartość z kontrolą wyrównania

Box: warstwy i nakładanie to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Box: warstwy i nakładanie” jest bezpłatna?

Tak — pełny tekst „Box: warstwy i nakładanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Box: warstwy i nakładanie”?

Układaj zawartość z kontrolą wyrównania Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Box: warstwy i nakładanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Jetpack Compose Academy