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

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

توضح الصورة التالية الأنواع الخمسة من الأزرار في Material Design.

مساحة عرض واجهة برمجة التطبيقات

• onClick: الدالة التي يتم استدعاءها عندما يضغط المستخدم على الزر
• enabled: عندما تكون المَعلمة false، تؤدي هذه المَعلمة إلى ظهور الزرّ. غير متاحة وغير نشطة.
• 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 UI