Jetpack Compose Academy · درس

استدعاء Composables من Composables

ركّب الأجزاء الصغيرة لتكوين شاشات أكبر

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

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

Build Big From Small

Real screens are not one giant function. You compose them by calling small Composables from inside larger ones, like nesting building blocks. 🧱

A Composable Calls Another

Inside one Composable you simply call another by name. Here Screen calls Greeting, and Compose draws Greeting where you placed it.

@Composable
fun Screen() {
    Greeting("Compose")
}

Stack Several Calls

List multiple calls one after another and they render in order, top to bottom, just like reading down the function.

@Composable
fun Screen() {
    Header()
    Body()
    Footer()
}

The Composition Tree

These nested calls form a tree. Screen is the parent, and each Composable it calls becomes a child node in the UI hierarchy.

Pass Data Downward

Parents hand data to children through parameters. The parent owns the value and the child just displays what it receives.

@Composable
fun Screen() {
    UserName(name = "Ada")
}

Reuse Everywhere

Because a Composable is just a function, you can reuse it as many times as you like across different screens with different data.

@Composable
fun List() {
    Item("Apple")
    Item("Pear")
}

Extract to Stay Readable

When a function grows long, extract a chunk into its own Composable and call it. The screen reads like a clear outline.

Composables Compose

The name says it all: small pieces combine into bigger ones. Mastering this nesting is the heart of building any Compose UI.

Children Render in Place

A child appears exactly where you call it in the parent. Move the call up or down and the UI moves with it.

@Composable
fun Card() {
    Title()
    Divider()
    Title()
}

Mix Built-in and Custom

You freely mix framework Composables like Text with your own. Compose treats them all the same when building the tree.

@Composable
fun Card() {
    Text("Hi")
    Greeting("there")
}

Think in Components

Designing in Compose means thinking in small reusable components. Each owns one job, and screens become a tidy arrangement of them.

Quick Check

Quick check on composing Composables.

Recap

You can now build screens by nesting Composables: call small ones inside bigger ones, pass data down, and reuse components to form the UI tree. 🎉

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

هل درس «استدعاء Composables من Composables» مجاني؟

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

ماذا ستتعلم في «استدعاء Composables من Composables»؟

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

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

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

كم من الوقت يستغرق درس «استدعاء Composables من Composables»؟

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

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

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

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

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