الأزرار هي مكونات أساسية تسمح للمستخدم بتشغيل إجراء محدد. هناك خمسة أنواع من الأزرار. يصف الجدول التالي مظهر كل نوع من أنواع الأزرار الخمسة، بالإضافة إلى المكان الذي يجب أن تستخدمها فيه.
Type |
المظهر |
الغرض |
---|---|---|
معبأ |
خلفية خالصة مع نص متباين |
أزرار عالية التوكيد. ترتبط هذه الإعدادات بالإجراءات الأساسية في أحد التطبيقات، مثل "إرسال" و "حفظ". يؤكد تأثير الظل على أهمية الزر. |
صبغة مملوءة |
يختلف لون الخلفية ليتطابق مع لون السطح. |
أيضًا للإجراءات الأساسية أو المهمة توفر الأزرار المعبأة وزنًا مرئيًا أكثر ووظائف مناسبة مثل "إضافة إلى عربة التسوق" و "تسجيل الدخول". |
مرتفعة |
تبرز بوجود ظل. |
تناسب دورًا مشابهًا لأزرار درجات اللون. يمكنك زيادة المسقط الرأسي لكي يظهر الزر بشكل أكثر بروزًا. |
مخطّط |
يظهر حد بدون تعبئة. |
أزرار متوسط التوكيد، تحتوي على إجراءات مهمة ولكنها ليست أساسية. ويمكن إقرانها جيدًا بأزرار أخرى للإشارة إلى الإجراءات الثانوية البديلة مثل "إلغاء" أو "رجوع". |
نص |
يتم عرض النص بدون خلفية أو حدود. |
أزرار منخفضة التركيز، مثالية للإجراءات الأقل أهمية، مثل روابط التنقّل، أو الوظائف الثانوية مثل "مزيد من المعلومات" أو "عرض التفاصيل" |
توضح الصورة التالية الأنواع الخمسة من الأزرار في Material Design.
مساحة عرض واجهة برمجة التطبيقات
onClick
: الدالة التي يتم استدعاءها عندما يضغط المستخدم على الزرenabled
: عندما تكون هذه المَعلمة false، تظهر هذه المَعلمة غير متاح وغير نشط.colors
: مثيل لـButtonColors
يحدد الألوان المستخدمة في الزر.contentPadding
: المساحة المتروكة داخل الزر
زر معبأ
يستخدم مكوّن الزر المعبّأ عنصر Button
الأساسي القابل للإنشاء. إنها مليئة بلون
أصلي بشكل افتراضي. يوضح المقتطف التالي كيفية
تنفيذ المكون:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![زر معبأ بخلفية أرجوانية مكتوب عليها "معبأ".](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=3&hl=ar)
زر درجات لونية معبأة
يستخدم عنصر زر الدرجات اللونية الذي تم ملؤه العنصر FilledTonalButton
القابل للإنشاء.
وهي ممتلئة بلون تدرّجي تلقائيًا.
يوضح المقتطف التالي كيفية تنفيذ المكوِّن:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![زر لوني مع خلفية أرجوانية فاتحة مكتوب عليها "ممتلئ".](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=3&hl=ar)
زر مخطّط
يستخدم مكوّن الزر المخطط عنصر OutlinedButton
القابل للإنشاء. يظهر مع مخطط تفصيلي بشكل افتراضي.
يوضح المقتطف التالي كيفية تنفيذ المكوِّن:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![زر شفاف محدد مع حد داكن مكتوب عليه "مخطَّط".](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=3&hl=ar)
زر بارز
يستخدم مكوّن الزرّ المرتفع العنصر ElevatedButton
القابل للإنشاء. يحتوي على ظل يمثل
تأثير الارتفاع بشكل افتراضي. لاحظ أنه في الأساس
زر محدد بظل.
يوضح المقتطف التالي كيفية تنفيذ المكوِّن:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![زر مرتفع بخلفية رمادية مكتوب عليها "مرتفع".](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=3&hl=ar)
زر لون النص
يستخدم مكوّن زر النص العنصر TextButton
القابل للإنشاء. حتى يتم الضغط عليه،
يظهر كنص فقط. لا تحتوي على تعبئة ثابتة أو مخطط بشكل افتراضي.
يوضح المقتطف التالي كيفية تنفيذ المكوِّن:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![زر نص يقول "زر نص"](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=3&hl=ar)