Jetpack Compose Academy · درس

‏Box: التكديس والتداخل

كدّس المحتوى مع التحكم في المحاذاة

‏Box: التكديس والتداخل درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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.

الأسئلة الشائعة

هل درس «‏Box: التكديس والتداخل» مجاني؟

نعم — نص درس «‏Box: التكديس والتداخل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏Box: التكديس والتداخل»؟

كدّس المحتوى مع التحكم في المحاذاة تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «‏Box: التكديس والتداخل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy