Android Academy · درس

الأزرار والنقرات

أضف أزرارًا تفاعلية

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

ما الزر؟

الزر Button عنصر قابل للتركيب يمكن النقر عليه. عندما ينقر المستخدم عليه، يشغّل التطبيق بعض الشيفرة.

تحتاج الأزرار إلى إجراء onClick ومحتوى لعرضه، ويكون هذا المحتوى عادةً تسمية نصية باستخدام Text.

Button(onClick = { }) {
    Text("Tap me")
}

Lambda الخاصة بـ onClick

يقبل المعامل onClick دالة lambda، وهي شيفرة بين القوسين المعقوفين { }. وتُشغّل هذه الشيفرة في كل مرة يُضغط فيها الزر.

يمكنك وضع أي منطق هناك، مثل طباعة البيانات أو تغييرها.

Button(onClick = {
    println("Clicked!")
}) {
    Text("Click")
}

محتوى الزر

المحتوى الموجود داخل القوسين المعقوفين اللاحقين هو RowScope. ويمكنك وضع Text أو Icons أو كليهما.

تحتوي معظم الأزرار على تسمية نصية واحدة تصف الإجراء.

Button(onClick = { }) {
    Text("Save")
}

عدّ النقرات باستخدام الحالة

للاستجابة للنقرات، خزّن قيمة باستخدام remember وmutableStateOf. عند تغيّرها، تحدّث واجهة المستخدم.

تضيف كل نقرة هنا واحدًا إلى count.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

تعطيل الزر

تتحكم المعلمة enabled في إمكانية النقر على الزر. عيّنها إلى false لجعل الزر رماديًا ومنع النقرات.

يفيد ذلك عندما يكون النموذج غير مكتمل.

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

OutlinedButton

يرسم OutlinedButton إطارًا فقط من دون تعبئة. ويعمل بالطريقة نفسها، لكنه يبدو أخف.

استخدمه للإجراءات الثانوية بجانب Button أساسي أكثر بروزًا.

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

يعرض TextButton تسمية فقط من دون إطار أو تعبئة. وهو أخف أنماط الأزرار.

يناسب الإجراءات منخفضة الأهمية مثل التخطي أو معرفة المزيد.

TextButton(onClick = { }) {
    Text("Skip")
}

ألوان الأزرار

يمكنكم تغيير لون Button باستخدام ButtonDefaults.buttonColors، مع تمرير containerColor لتحديد لون الخلفية.

اختاروا ألوانًا تناسب علامتكم التجارية وتحافظ على سهولة القراءة.

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

إنّ IconButton مساحة صغيرة مستديرة قابلة للنقر، ومخصّصة لـ Icon واحد مثل رمز القلب أو القائمة.

لا يحتوي على تسمية، لذلك يوفر مساحة في أشرطة الأدوات.

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

تشكيل الزر

تغيّر المعلمة shape شكل الزوايا. استخدموا RoundedCornerShape مع قيمة بوحدة dp لجعل الحواف أكثر استدارة.

تمنح القيم الأكبر أزرارًا أكثر نعومة تشبه شكل الحبة.

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

تسمية دوال النقر

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

مرّروا مرجع الدالة أو استدعوا الدالة داخل lambda.

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

اختبار سريع

اختبروا فهمكم للأزرار.

مراجعة

تعلّمتم أن Button يستخدم onClick لتنفيذ الإجراء، وأن content block يحدد التسمية. وتتيح الحالة باستخدام remember للنقرات تغيير واجهة المستخدم.

كما تعرّفتم على OutlinedButton وTextButton وIconButton، وعلى كيفية ضبط enabled والألوان والشكل.

بعد ذلك، ستتحكمون في المسافات باستخدام padding.

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

هل درس «الأزرار والنقرات» مجاني؟

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

ماذا ستتعلم في «الأزرار والنقرات»؟

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

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

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

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

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

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

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

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

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