زر الإجراء العائم

زر الإجراء العائم (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.")
    }
}
FloatingActionButton.kt

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

زر صغير

لإنشاء زر إجراء عائم صغير، استخدِم 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.")
    }
}
FloatingActionButton.kt

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

زر كبير

لإنشاء زر إجراء عائم كبير، استخدِم LargeFloatingActionButton القابل للإنشاء. لا يختلف هذا العنصر القابل للإنشاء بشكل كبير عن الأمثلة الأخرى بخلاف حقيقة أنه ينتج عنه زر أكبر.

في ما يلي تنفيذ مباشر لزر الإجراءات الرئيسي (FAB) كبير.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

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

الزر الموسّع

يمكنك إنشاء أزرار إجراءات عائمة أكثر تعقيدًا باستخدام عناصر 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") },
    )
}
FloatingActionButton.kt

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

مصادر إضافية

• الأزرار الشائعة
• مستندات واجهة Material UI