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

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

في ما يلي ثلاث حالات استخدام قد تحتاج فيها إلى زر الإجراء الرئيسي (FAB):

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

في Material Design، هناك أربعة أنواع من أزرار الإجراءات العائمة:

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

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

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

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

زر الإجراء الرئيسي

لإنشاء زر الإجراء الرئيسي عام، استخدِم الدالة البرمجية المركّبة الأساسية FloatingActionButton. يوضّح المثال التالي تنفيذًا أساسيًا لزر الإجراء الرئيسي (FAB):

@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