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

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

ضع في اعتبارك حالات الاستخدام الثلاث هذه التي يمكنك فيها استخدام زر الإجراء الرئيسي (FAB):

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

في أسلوب Material Design، هناك أربعة أنواع من التطبيقات المصغّرة القابلة للاستخدام في وضع ملء الشاشة:

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

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

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

  • 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. لا يختلف هذا العنصر القابل للتجميع عن الأمثلة الأخرى بشكلٍ كبير، باستثناء أنّه يؤدي إلى إنشاء زر أكبر.

في ما يلي مثال بسيط على تنفيذ زرّ إجراءات سريعة كبير.

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

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

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

مصادر إضافية