تتيح الأزرار للمستخدم تنفيذ إجراء محدّد. هناك خمسة أنواع من buttons:
النوع |
المظهر |
الغرض |
---|---|---|
مملوءة | خلفية صلبة مع نص ذي تباين |
للإجراءات الأساسية، مثل "إرسال" و "حفظ" يُبرز تأثير الظل أهمية الزر. |
Tonal | يختلف لون الخلفية ليتناسب مع السطح. |
للإجراءات الأساسية أو المهمة تُضفي الأزرار الملونة وزنًا بصريًا وهي مناسبة لإجراءات مثل "إضافة إلى سلة التسوّق" و "تسجيل الدخول". |
مرتفع | ويُبرز الظلّ هذه العناصر. |
للإجراءات الأساسية أو المهمة يمكنك زيادة الارتفاع لجعل الزر أكثر بروزًا. |
مخطَّط | يعرض حدودًا بدون تعبئة. |
للإجراءات المهمة ولكن ليست أساسية. تتناسب الأزرار المخطَّطة بشكل جيد مع الأزرار الأخرى للإشارة إلى إجراءات ثانوية بديلة، مثل "إلغاء" أو "رجوع". |
Text | نص بدون خلفية أو حدود |
للإجراءات الأقل أهمية، مثل روابط التنقّل أو الإجراءات الثانوية، مثل "مزيد من المعلومات" أو "عرض التفاصيل" |
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.
التبعيات
إنشاء زرّ ممتلئ
يستخدم مكوّن الزرّ الممتلئ العنصر الأساسي Button
القابل للتجميع. ويتم تلقائيًا
ملؤه بلون واحد.
النتائج
![زرّ معبأ بخلفية أرجوانية يظهر عليه النص "معبأ"](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?hl=ar)
إنشاء زرّ نغمي ممتلئ
يستخدم مكوّن الزرّ الملوّن الممتلئ العنصر القابل للتجميع FilledTonalButton
.
ويتم ملؤه تلقائيًا بلون نغمي.
النتائج
![زرّ موحّد اللون على خلفية أرجوانية فاتحة يظهر عليه النص "ممتلئ"](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?hl=ar)
إنشاء زرّ محدَّد الجوانب
يستخدم مكوّن الزرّ المخطّط العنصر القابل للتجميع OutlinedButton
. ويظهر
مع مخطّط تلقائيًا.
النتائج
![زر شفاف محدَّد الجوانب مع إطار داكن يظهر عليه النص "محدَّد الجوانب"](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?hl=ar)
إنشاء زرّ مميّز
يستخدم مكوّن الزرّ البارز العنصر القابل للتجميع ElevatedButton
. يحتوي على
ظل يمثّل تأثير الارتفاع تلقائيًا ويظهر على هيئة
زر مخطّط مع ظل.
النتائج
![زر بارز على خلفية رمادية يظهر عليه النص "بارز"](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?hl=ar)
إنشاء زر نصي
يستخدم مكوّن الزر النصي العنصر القابل للتجميع TextButton
. ولا يظهر سوى كنص إلى أن يتم النقر عليه. لا يحتوي على تعبئة أو مخطط صلب تلقائيًا.
النتائج
![زر نصي يظهر عليه النص "زر نصي"](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?hl=ar)
النقاط الرئيسية
onClick
: الدالة التي يتمّ استدعاؤها عندما يضغط المستخدم على الزرenabled
: عندما تكون هذه المَعلمة غير صحيحة، يؤدي ذلك إلى ظهور الزر غير متاح وغير نشط.colors
: مثيلButtonColors
الذي يحدّد الألوان المستخدَمة في الزر-
contentPadding
: المساحة الفارغة داخل الزر
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ar)