Jetpack Compose Academy · درس

حالات التفعيل والتعطيل والتحميل

اعكس التوفر في أزرارك

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

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

للأزرار حالات مختلفة

يعكس الزر الجيد الواقع: جاهز أو محظور أو قيد التنفيذ. يتيح لك Compose التعبير عن هذه الحالات حتى يعرف المستخدمون دائمًا ما يمكنهم فعله. 🚦

المعامل enabled

يقبل كل زر علامة enabled. اضبطها على false، وسيتحول الزر إلى اللون الرمادي ويتجاهل النقرات تلقائيًا.

Button(
    onClick = { submit() },
    enabled = false
) { Text("Submit") }

تحكّم في enabled من الحالة

تظهر القوة الحقيقية عند ربط enabled بالحالة. اربطه بعملية التحقق حتى لا يتفعّل الزر إلا عندما تكون المدخلات جاهزة.

Button(
    onClick = { submit() },
    enabled = name.isNotBlank()
) { Text("Submit") }

المعطّل يعني أنه محظور

يظل الزر المعطّل ظاهرًا، فيرى المستخدمون أن الإجراء موجود. ويشير مظهره الباهت إلى سبب عدم جاهزيته بعد دون الحاجة إلى رسالة خطأ.

اعرض التقدّم أثناء التنفيذ

بالنسبة إلى الإجراءات البطيئة، اعرض حالة التحميل. تتبّع قيمة منطقية واستبدل التسمية بمؤشر دوران أثناء تنفيذ العمل.

var loading by remember { mutableStateOf(false) }

عطّل الزر أثناء التحميل

أثناء التحميل، اضبط enabled = !loading حتى لا يتمكن المستخدمون من النقر مرتين وتشغيل الإجراء نفسه مرتين.

Button(
    onClick = { loading = true },
    enabled = !loading
) { Text("Save") }

استبدل التسمية بمؤشر دوران

داخل المحتوى، استخدم تفرعًا يعتمد على العلامة: اعرض CircularProgressIndicator صغيرًا عند التحميل، واعرض التسمية في غير ذلك.

Button(onClick = { }, enabled = !loading) {
    if (loading) CircularProgressIndicator(Modifier.size(18.dp))
    else Text("Save")
}

صغّر مؤشر الدوران

يكون مؤشر الدوران الافتراضي كبيرًا. قيّده باستخدام Modifier.size حتى يتناسب بدقة مع الموضع الذي كانت التسمية تشغله.

CircularProgressIndicator(
    modifier = Modifier.size(18.dp),
    strokeWidth = 2.dp
)

أعد الضبط عند الانتهاء

عند انتهاء العمل، أعد loading إلى false. تعود التسمية ويصبح الزر قابلًا للنقر من جديد.

onResult = { loading = false }

تمنع الحالات الأخطاء

معًا، يحمي enabled وloading إجراءاتك: فلا نقرات قبل صحة المدخلات، ولا نقرات مكررة أثناء تنفيذ العمل.

أبلغ المستخدم ولا تُخفِ العنصر

فضّل تعطيل الزر على إخفائه. فالتحكم الظاهر لكنه معطّل يعلّم المستخدمين الطريق إلى تفعيله.

تحقّق سريعًا

يستغرق إجراء الحفظ ثانيتين، ويستمر المستخدمون في النقر عليه مرتين.

مراجعة: الأزرار المعتمدة على الحالة

تعلّمت كيف تعكس الواقع: يقيّد enabled الإجراء بحسب صحة المدخلات، بينما تعرض علامة التحميل التقدّم وتمنع التكرار. أزرار صادقة ومستخدمون سعداء. 🎯

البدء مجانًا

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

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

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

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

هل درس «حالات التفعيل والتعطيل والتحميل» مجاني؟

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

ماذا ستتعلم في «حالات التفعيل والتعطيل والتحميل»؟

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

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

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

كم من الوقت يستغرق درس «حالات التفعيل والتعطيل والتحميل»؟

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

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

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

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

  1. ‏Button وonClick
  2. أزرار Text وOutlined وIcon
  3. حالات التفعيل والتعطيل والتحميل
  4. ‏clickable على أي Composable
← العودة إلى Jetpack Compose Academy