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

النوع	المظهر	الغرض
تم ملؤها	خلفية صلبة مع نص متباين	الأزرار التي تُبرز المحتوى هذه الإجراءات مخصّصة للإجراءات الأساسية في التطبيق، مثل "إرسال" و "حفظ". يُبرز تأثير الظل أهمية الزر.
نغمي ممتلئ	يختلف لون الخلفية ليتناسب مع السطح.	وكذلك للإجراءات الأساسية أو المهمة. تُضفي الأزرار الملونة تأثيرًا مرئيًا أكبر وتتناسب مع وظائف مثل "إضافة إلى سلة التسوّق" و "تسجيل الدخول".
مرتفعة	يبرز من خلال ظهور ظلّه.	تؤدي وظيفة مشابهة للأزرار ذات الألوان المتجانسة. يمكنك زيادة الارتفاع لجعل الزر يظهر بشكل أكثر بروزًا.
مخطّط	يعرض حدودًا بدون تعبئة.	الأزرار ذات التأكيد المتوسط، التي تحتوي على إجراءات مهمة ولكنها ليست أساسية تتناسب هذه الأزرار بشكل جيد مع الأزرار الأخرى للإشارة إلى إجراءات ثانوية بديلة، مثل "إلغاء" أو "رجوع".
نص	تعرِض هذه السمة النص بدون خلفية أو إطار.	أزرار ذات أهمية منخفضة، وهي مثالية للإجراءات الأقل أهمية، مثل روابط التنقّل أو الوظائف الثانوية، مثل "مزيد من المعلومات" أو "عرض التفاصيل"

توضِّح الصورة التالية الأنواع الخمسة للأزرار في تصميم المواد.

واجهة برمجة التطبيقات

• onClick: الدالة التي يتمّ استدعاؤها عندما يضغط المستخدم على الزر
• enabled: عندما تكون هذه المَعلمة غير صحيحة، يؤدي ذلك إلى ظهور الزر غير متاح وغير نشط.
• colors: مثيل ButtonColors الذي يحدّد الألوان المستخدَمة في الزر
• contentPadding: المساحة الفارغة داخل الزر

زرّ مُعبّأ

يستخدم مكوّن الزرّ الممتلئ العنصر الأساسي Button القابل للتجميع. ويتم تلقائيًا ملؤه بلون واحد. يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

تظهر عملية التنفيذ هذه على النحو التالي:

زرّ نغميّ معبأ

يستخدم مكوّن الزرّ الملوّن الممتلئ العنصر القابل للتجميع FilledTonalButton. ويتم ملؤه تلقائيًا بلون نغمي.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

تظهر عملية التنفيذ هذه على النحو التالي:

زر محدَّد الجوانب

يستخدم مكوّن الزرّ المخطّط العنصر القابل للتجميع OutlinedButton. ويظهر مع مخطّط تلقائيًا.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

تظهر عملية التنفيذ هذه على النحو التالي:

زر بارز

يستخدم مكوّن الزرّ البارز العنصر القابل للتجميع ElevatedButton. يحتوي على ظل يمثّل تأثير الارتفاع تلقائيًا. يُرجى العِلم أنّه يشبه بشكل أساسي زرًا مخطّطًا بظل.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

تظهر عملية التنفيذ هذه على النحو التالي:

زر نصي

يستخدم مكوّن الزر النصي العنصر القابل للتجميع TextButton. ويظهر كنص فقط إلى أن يتم الضغط عليه. لا يحتوي على تعبئة أو مخطط صلب تلقائيًا.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

تظهر عملية التنفيذ هذه على النحو التالي:

مصادر إضافية

• زر الإجراء العائم
• مستندات واجهة مستخدم Material