Android Academy · درس

ما هو Composable

دوال تصف واجهة المستخدم

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

ما هو Composable؟

في Jetpack Compose، تبني الشاشات بكتابة دوال بدلًا من تحميل تخطيطات XML. إن composable ببساطة دالة Kotlin تصف جزءًا من واجهة المستخدم.

تضع وسم @Composable على هذه الدالة. ويخبر ذلك مترجم Compose بأن الدالة يمكنها إصدار واجهة مستخدم واستدعاء دوال composable أخرى.

الوسم @Composable

تؤدي إضافة @Composable أعلى الدالة إلى تمكين إمكانات Compose المتقدمة. وداخلها، يمكنك استدعاء composables أخرى مثل Text أو Column.

وفقًا للاتفاقية، تبدأ أسماء دوال composable بحرف كبير، تمامًا مثل أسماء الأصناف. وهذا يجعل دوال واجهة المستخدم سهلة التمييز في التعليمات البرمجية.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

وصف واجهة المستخدم باستخدام Kotlin

لا تُرجع composable كائن View. بل إنها تصدر واجهة المستخدم كأثر جانبي عندما يشغّلها Compose. وما عليك سوى وصف ما ينبغي أن يظهر على الشاشة.

يُسمى هذا الأسلوب تصريحيًا: تحدد شكل واجهة المستخدم وفق البيانات الحالية، ويتولى Compose تحديد كيفية رسمها.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

تستدعي composables بعضها بعضًا

تظهر القوة الحقيقية في التداخل. إذ يمكن لـ composable استدعاء composables أخرى، ما يتيح لك بناء شاشات معقدة من أجزاء صغيرة قابلة لإعادة الاستخدام.

يستدعي composable أب هنا composable ابنًا. ويشغلهما Compose من الأعلى إلى الأسفل، ثم يرتب واجهة المستخدم المُصدرة.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

دوال بلا قيم مُرجعة

تُرجع معظم composables القيمة Unit، ما يعني أنها لا تُرجع شيئًا مفيدًا. فمهمتها إصدار واجهة المستخدم، لا إعادة قيمة.

لذلك تستدعي composable لتأثيرها على الشاشة، لا لالتقاط نتيجة منها. قد يبدو هذا مختلفًا عن الدوال العادية، لكنه يصبح طبيعيًا سريعًا.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

تمرير البيانات كمعاملات

يمكن أن تتلقى composables معاملات، تمامًا مثل دوال Kotlin العادية. ويتيح ذلك لـ composable نفسها عرض بيانات مختلفة.

تقبل Greeting هنا قيمة name وتعرضها. ويجعل تمرير البيانات إلى الداخل composables مرنة وقابلة لإعادة الاستخدام في أنحاء التطبيق.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

إعادة استخدام Composable

بما أن composables دوال، يمكنك استدعاء إحداها مرات عديدة باستخدام وسيطات مختلفة. ويُصدر كل استدعاء نسخته الخاصة من واجهة المستخدم.

بهذه الطريقة تتجنب التكرار: اكتب واجهة المستخدم مرة واحدة، ثم أعد استخدامها حيثما احتجت إليها.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

مكان وجود composables

تضع composables داخل activity الخاصة بنظام Android باستخدام setContent. وتُعد هذه الكتلة نقطة الدخول التي يتولى فيها Compose الشاشة.

داخل setContent، تستدعي composable الرئيسية، وكل ما تصدره يصبح واجهة مستخدم التطبيق.

setContent {
    Greeting("World")
}

أساسيات إعادة التركيب

عندما تتغير البيانات التي تقرؤها composable، يعيد Compose تشغيل تلك الدالة لتحديث الشاشة. وتُسمى إعادة التشغيل هذه إعادة التركيب.

لا تحتاج إلى تحديث واجهة المستخدم يدويًا. غيّر البيانات، وسيعيد Compose تركيب composables المتأثرة تلقائيًا. وهذا يحافظ على مزامنة الشاشة مع الحالة.

اجعل composables صغيرة

من العادات الجيدة أن تجعل كل composable تنفذ مهمة واضحة واحدة. فـ composables الصغيرة المركزة أسهل في القراءة والاختبار وإعادة الاستخدام.

إذا أصبحت الدالة كبيرة جدًا، فقسّمها إلى composables أصغر واستدعها معًا. وسيشكرك على ذلك أنت في المستقبل.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

الاستيرادات التي ستراها

تأتي composables من مكتبات Compose. وستستورد غالبًا androidx.compose.runtime.Composable للوسم وandroidx.compose.material3.Text للنص.

يضيف Android Studio هذه الاستيرادات عادةً نيابةً عنك. ومعرفة مصدرها مفيدة عند فقدان أحد الاستيرادات.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

تحقق سريع

لنراجع ما الذي يجعل الدالة composable.

مراجعة

تعلمت أن composable هي دالة Kotlin تحمل الوسم @Composable وتصف واجهة المستخدم بأسلوب تصريحي. ويمكن لـ composables استقبال معاملات واستدعاء composables أخرى، وتُسمى بأسماء تبدأ بحرف كبير.

وهي تُرجع Unit وتصدر واجهة المستخدم بدلًا من إرجاع قيمة. وعند تغير البيانات، يعيد Compose تركيبها لتحديث الشاشة. ستعرض في الخطوة التالية نصًا فعليًا وترص المشاهد باستخدام Column.

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

هل درس «ما هو Composable» مجاني؟

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

ماذا ستتعلم في «ما هو Composable»؟

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

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

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

كم من الوقت يستغرق درس «ما هو Composable»؟

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

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

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

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

← العودة إلى Android Academy