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