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

زر الإجراء الرئيسي (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