Jetpack Compose Academy · درس

خانات حالة Compose وContent Lambdas

اجعل المكونات مرنة باستخدام واجهات الخانات

الدرس 4 من 413 خطوة

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

اجعل المكوّنات مرنة

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

تعرّف إلى Lambda المحتوى

أكثر الفتحات شيوعًا هي Lambda content لاحقة من النوع @Composable () -> Unit. وكل ما تضعه بين القوسين المعقوفين يصبح المحتوى.

fun Card(content: @Composable () -> Unit) {
  Surface { content() }
}

استدعاء فتحة

تستدعي الفتحة كما تستدعي Lambda عادية. يشغّل Compose واجهة المستخدم التي مررها المستدعي في المكان الذي تستدعي فيه content().

Card {
  Text("Anything I want lives here")
}

لماذا تتفوق الفتحات على القيم المنطقية

بدلًا من استخدام أعلام كثيرة مثل showIcon أو showTitle، اعرض فتحات. يؤلف المستدعون ما يحتاجون إليه بالضبط، مع حرية كاملة.

الفتحات المسماة

يمكن للمكوّنات توفير عدة فتحات، تمثل كل منها معلمة. يفعل Scaffold ذلك باستخدام topBar وbottomBar وcontent. 🧩

fun Banner(
  title: @Composable () -> Unit,
  action: @Composable () -> Unit
) { /* lay them out */ }

تضيف النطاقات قوة

يمكن أن تكون الفتحة Lambda من نوع receiver، فتمنح المستدعي أدوات مساعدة. داخل Column، يكون content من النوع ColumnScope.() -> Unit، ولذلك يعمل weight.

fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
  Column { content() }
}

تمرير البيانات إلى فتحة

يمكن للفتحات تسليم القيم إلى المستدعي. فقد تمرر فتحة صف في قائمة العنصر، ليقرر المستدعي كيفية رسمه.

fun Row(item: User, content: @Composable (User) -> Unit) {
  content(item)
}

تحافظ الفتحات على رفع الحالة

بما أن المستدعي يوفر محتوى الفتحة، يظل مكوّنك عديم الحالة فيما يخص ما بداخله. وتظل الملكية واضحة.

إعادة الاستخدام عبر الشاشات

تستبدل Card أو Dialog واحدة تحتوي على فتحات عشرات المكوّنات المتشابهة تقريبًا. تبني الإطار مرة واحدة وتغيّر المحتوى. ♻️

المحتوى الافتراضي للفتحة

وفّر محتوى افتراضيًا مناسبًا للفتحة حتى يتمكن المستدعون البسيطون من تخطيها، بينما يستطيع المستدعون المتقدمون استبداله بالكامل.

fun Section(
  header: @Composable () -> Unit = { Text("Section") },
  content: @Composable () -> Unit
) { /* ... */ }

طريقة التفكير بالفتحات

عندما يبدأ مكوّن ما في جمع أعلام منطقية، استخدم الفتحات بدلًا منها. تأتي المرونة من تمرير واجهة المستخدم، لا من مفاتيح التبديل.

تحقق سريع

ما الفائدة الأساسية من Lambda الخاصة بفتحة المحتوى؟

مراجعة

تقبل الفتحات واجهة المستخدم بصفتها Lambdas من نوع @Composable، مع إمكانية تحديد نطاقها أو تمرير البيانات. وتجعل المكوّنات مرنة مع الحفاظ على رفع الحالة. 🚀

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

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

الدورات
30
الدروس
120

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

هل درس «خانات حالة Compose وContent Lambdas» مجاني؟

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

ماذا ستتعلم في «خانات حالة Compose وContent Lambdas»؟

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

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

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

كم من الوقت يستغرق درس «خانات حالة Compose وContent Lambdas»؟

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

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

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

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

  1. ‏Composables ذات الحالة مقابل عديمة الحالة
  2. رفع الحالة باستخدام value وonValueChange
  3. مصدر واحد للحقيقة
  4. خانات حالة Compose وContent Lambdas
← العودة إلى Jetpack Compose Academy