Jetpack Compose Academy · Ders

Box: Katmanlama ve Üst Üste Bindirme

İçeriği hizalama denetimiyle üst üste yerleştirin.

Box: Katmanlama ve Üst Üste Bindirme, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Box: Katmanlama ve Üst Üste Bindirme” dersi ücretsiz mi?

Evet — “Box: Katmanlama ve Üst Üste Bindirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Box: Katmanlama ve Üst Üste Bindirme” dersinde ne öğreneceğim?

İçeriği hizalama denetimiyle üst üste yerleştirin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Box: Katmanlama ve Üst Üste Bindirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön