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

زر الإجراء العائم (FAB) هو زر شديد التوكيد يسمح للمستخدم بتنفيذ إجراء أساسي في أحد التطبيقات. فهو يشجع على إجراء واحد مركز يعد المسار الأكثر شيوعًا الذي قد يتخذه المستخدم وعادة ما يكون ثابتًا في أسفل يمين الشاشة.

ضع في اعتبارك حالات الاستخدام الثلاث التالية التي يمكنك من خلالها استخدام FAB:

• إنشاء عنصر جديد: في تطبيق تدوين الملاحظات، يمكن استخدام FAB لإنشاء ملاحظة جديدة بسرعة.
• إضافة جهة اتصال جديدة: في تطبيق المحادثات، يمكن لزر الإجراء الرئيسي فتح واجهة تسمح للمستخدم بإضافة مستخدم إلى المحادثة.
• موقع المركز: في واجهة الخريطة، يمكن لزر الإجراء (FAB) تحديد مركز الخريطة على الموقع الجغرافي الحالي للمستخدم.

في Material Design، هناك أربعة أنواع من FAB:

• زر الإجراء الرئيسي (FAB): زر إجراء عائم بالحجم العادي.
• زر الإجراء الرئيسي الصغير: زر إجراء عائم أصغر حجمًا
• زرّ الإجراء الرئيسي الكبير: زر إجراء عائم أكبر
• زرّ الإجراء الرئيسي الموسَّع: زر إجراء عائم يحتوي على أكثر من رمز.

الشكل 1. أنواع أزرار الإجراءات العائمة الأربعة

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

على الرغم من وجود العديد من العناصر القابلة للإنشاء التي يمكنك استخدامها لإنشاء أزرار إجراءات عائمة متوافقة مع Material Design، فإن معلماتها لا تختلف كثيرًا. من بين المعلمات الرئيسية التي ينبغي أن تضعها في اعتبارك ما يلي:

• onClick: الوظيفة التي تستدعي عندما يضغط المستخدم على الزر
• containerColor: لون الزرّ
• contentColor: لون الرمز

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

لإنشاء زر إجراء عائم عام، استخدِم زر FloatingActionButton الأساسي القابل للإنشاء. يوضح المثال التالي التنفيذ الأساسي لـ FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

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

الشكل 2. زر إجراء عائم

زر صغير

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

ملاحظة: بما أنّ العناصر المختلفة للإنشاء في FAB تتشارك العديد من المَعلمات، يمكنك استخدام الأسلوب الوارد في هذا المثال لتخصيص الألوان باستخدام عناصر قابلة للإنشاء الأخرى.

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

الشكل 3. زر إجراء عائم صغير

زر كبير

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

في ما يلي تنفيذ مباشر لمجموعة إجراءات FAB كبيرة.

ملاحظة: يمرر هذا المثال CircleShape كقيمة للمعلمة shape، ما يؤدي إلى إنشاء زر دائري، بدلاً من مربع ذي حدود مستديرة. يمكنك تمرير أي مثيل لـ Shape، أو ضبط قيمة MaterialTheme.shape.large لتعديلها في تطبيقك.

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

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

الشكل 4. زر إجراء عائم كبير

الزر الموسّع

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

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

الشكل 5. زر إجراء عائم مع نص ورمز.

مراجع إضافية

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