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

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

إليك حالات الاستخدام الثلاث التي قد تستخدم فيها مربّع الإجراء السريع:

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

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

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

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

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

  • onClick: الدالة التي يتم استدعاءها عندما يضغط المستخدم على الزر
  • containerColor: لون الزر.
  • contentColor: لون الرمز

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

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

@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

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

يشير هذا المصطلح إلى تنفيذ لـ SmallFloatingActionButton الذي يحتوي على الرمز "إضافة". .
الشكل 3. زرّ إجراء رئيسي صغير عائم

زر كبير

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

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

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

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

يشير هذا المصطلح إلى عملية تنفيذ للإجراء كبيرFloatingActionButton الذي يحتوي على الرمز "إضافة". .
الشكل 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

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

يشير هذا المصطلح إلى تنفيذ لزر ExtendedFloatingActionButton الذي يعرض النص الذي يشير إلى "الزر الموسّع". وأيقونة تعديل.
الشكل 5. زرّ إجراء رئيسي عائم يتضمّن نصًا ورمزًا

مصادر إضافية