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

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

إليك ثلاث حالات استخدام يمكنك فيها استخدام زر الإجراء الرئيسي (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