المعاينات وإعادة التحميل الفوري
كرّر العمل بسرعة باستخدام معاينات Compose
المعاينات وإعادة التحميل الفوري درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.
المعاينات أثناء التصميم
من أفضل ميزات Compose التعليق التوضيحي @Preview: إذ يمكنكم رؤية عرض عنصر composable داخل Android Studio من دون تشغيل التطبيق على جهاز أو محاكي.
التعليق التوضيحي @Preview
أضيفوا @Preview فوق دالة @Composable. سيعرضها Android Studio في لوحة التصميم.
@Preview
@Composable
fun GreetingPreview() {
Greeting(name = "Preview")
}لا تحتاج المعاينات إلى معاملات
يجب استدعاء دالة المعاينة باستخدام بلا معاملات. لذلك تنشئون عنصرًا composable مغلفًا يوفّر بيانات نموذجية، ثم تنشئون معاينة لهذا الغلاف.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada", followers = 42)
}تسمية دوال المعاينة
من المتعارف عليه تسمية الأغلفة الخاصة بالمعاينة باسم العنصر composable مع اللاحقة Preview، مثلًا GreetingPreview. ويسهّل ذلك العثور عليها، ويوضح أنها لا تُستخدم في بيئة الإنتاج.
معاملات المعاينة
يقبل @Preview معاملات لضبط العرض، مثل showBackground وname وwidthDp.
@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
Greeting(name = "Hi")
}showBackground
تكون خلفية المعاينة شفافة افتراضيًا. مرّروا showBackground = true لعرض سطح معتم، مما يجعل النص أسهل رؤيةً أثناء التصميم.
معاينات متعددة
يمكنكم وضع عدة تعليقات توضيحية @Preview على دالة واحدة لرؤية إعدادات مختلفة جنبًا إلى جنب — مثل عرض صغير وعرض كبير.
@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
HomeScreen()
}المعاينة التفاعلية
يوفّر Android Studio الوضع التفاعلي للمعاينات. ويتيح لكم النقر على الأزرار وتشغيل تغييرات الحالة داخل المعاينة مباشرةً، من دون نشر التطبيق.
التحرير المباشر / إعادة التحميل السريع
باستخدام التحرير المباشر، تظهر التعديلات على أجسام العناصر composable في المعاينة، وحتى على جهاز قيد التشغيل، بصورة شبه فورية — من دون الحاجة إلى إعادة بناء كاملة. وهذا يسرّع دورة التصميم بدرجة كبيرة.
المعاينات مجانية
تُزال دوال المعاينة من إصدار الإنتاج، لذا لا تكلّف إضافة عدد كبير من المعاينات شيئًا أثناء التشغيل. استخدموها بحرية لتوثيق كل عنصر composable واختباره بصريًا.
مثال كامل
إليكم عنصرًا composable ومعاينته. افتحوا لوحة التصميم لرؤية عرضه فورًا.
@Composable
fun Badge(label: String) {
Text(text = label, color = Color.White)
}
@Preview(showBackground = true)
@Composable
fun BadgePreview() {
Badge(label = "NEW")
}تحقق سريع
لماذا يجب ألا تقبل دالة @Preview أي معاملات؟
مراجعة
تسرّع المعاينات عملية تطوير Compose:
- أضيفوا
@Previewفوق عنصر composable لا يقبل معاملات. - استخدموا خيارات مثل
showBackgroundوwidthDp. - ضعوا معاينات متعددة، واستخدموا الوضع التفاعلي والتحرير المباشر للتكرار السريع.
تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 36
- الدروس
- 152
الأسئلة الشائعة
هل درس «المعاينات وإعادة التحميل الفوري» مجاني؟
نعم — نص درس «المعاينات وإعادة التحميل الفوري» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.
ماذا ستتعلم في «المعاينات وإعادة التحميل الفوري»؟
كرّر العمل بسرعة باستخدام معاينات Compose تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟
لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «المعاينات وإعادة التحميل الفوري»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟
نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما Jetpack Compose؟
- أول Composable لك
- النص والصورة والزر
- المعاينات وإعادة التحميل الفوري