زر الإجراء العائم (FAB) هو زر عالي التوكيد يتيح للمستخدم تنفيذ إجراء أساسي في أحد التطبيقات. يروج لإجراء واحد مركَّز هو المسار الأكثر شيوعًا الذي قد يتخذه المستخدم وعادة ما يوجد مثبّتًا في أسفل يمين الشاشة.
ضع في اعتبارك حالات الاستخدام الثلاث هذه التي قد تستخدم فيها زر الإجراء الرئيسي (FAB):
- إنشاء عنصر جديد: في تطبيق تدوين الملاحظات، يمكن استخدام الإجراء الرئيسي (FAB) لإنشاء ملاحظة جديدة بسرعة.
- إضافة جهة اتصال جديدة: في تطبيق الدردشة، يمكن لزر الإجراء الرئيسي (FAB) فتح واجهة تتيح للمستخدم إضافة شخص ما إلى المحادثة.
- الموقع الجغرافي في المركز: في واجهة الخريطة، يمكن أن يحدّد زر الإجراء الرئيسي (FAB) الخريطة على الموقع الجغرافي الحالي للمستخدم.
في Material Design، هناك أربعة أنواع من FAB:
- زر الإجراءات الرئيسي (FAB): زر إجراء عائم بحجم عادي.
- زر الإجراء الرئيسي (FAB صغير): زر إجراء عائم أصغر.
- زر الإجراءات الرئيسي (FAB) كبير: زر إجراء عائم أكبر
- زر الإجراء الرئيسي الموسَّع: زر إجراء عائم يحتوي على أكثر من مجرد رمز.
مساحة عرض واجهة برمجة التطبيقات
على الرغم من وجود العديد من العناصر القابلة للإنشاء التي يمكنك استخدامها لإنشاء أزرار إجراءات عائمة متوافقة مع Material Design، فإن معلماتها لا تختلف اختلافًا كبيرًا. في ما يلي بعض المعلمات التي يجب وضعها في الاعتبار:
onClick
: الدالة التي يتم استدعاءها عندما يضغط المستخدم على الزرcontainerColor
: لون الزرّcontentColor
: لون الرمز
زر الإجراء العائم
لإنشاء زر إجراء عائم عام، استخدِم زر FloatingActionButton
الأساسي القابل للإنشاء. يوضح المثال التالي تنفيذًا أساسيًا لزر الإجراء العائم:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
زر صغير
لإنشاء زر إجراء عائم صغير، استخدِم SmallFloatingActionButton
القابل للإنشاء. يوضح المثال التالي كيفية القيام بذلك،
مع إضافة ألوان مخصصة.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
زر كبير
لإنشاء زر إجراء عائم كبير، استخدِم LargeFloatingActionButton
القابل للإنشاء. لا يختلف هذا العنصر القابل للإنشاء بشكل كبير عن الأمثلة الأخرى بخلاف حقيقة أنه
ينتج عنه زر أكبر.
في ما يلي تنفيذ مباشر لزر الإجراءات الرئيسي (FAB) كبير.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
تظهر طريقة التنفيذ هذه على النحو التالي:
الزر الموسّع
يمكنك إنشاء أزرار إجراءات عائمة أكثر تعقيدًا باستخدام عناصر ExtendedFloatingActionButton
القابلة للإنشاء. يكمن الاختلاف الرئيسي بينها وبين FloatingActionButton
في أنّه يتضمّن مَعلمتَي icon
وtext
. فهي تتيح لك إنشاء زر بمحتوى أكثر تعقيدًا يتم ضبطه
ليتناسب مع محتواه بشكل مناسب.
يوضّح المقتطف التالي كيفية تنفيذ ExtendedFloatingActionButton
، من خلال أمثلة على القيم التي تم تمريرها لكل من icon
وtext
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
تظهر طريقة التنفيذ هذه على النحو التالي: