Button

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

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

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

الشكل 1. مكوّنات الزرّ الخمسة

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

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

زرّ مُعبّأ

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

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

ملاحظة: إذا كنت تريد إنشاء زر مخصّص، استخدِم العنصر القابل للتجميع Button.

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

الشكل 2. زرّ مُعبّأ

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

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

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

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

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

الشكل 3. زرّ نغمي

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

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

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

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

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

الشكل 4. زر محدَّد الجوانب

زر بارز

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

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

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

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

الشكل 5. زر بارز

زر نصي

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

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

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

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

الشكل 6. زر نصي

مصادر إضافية

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