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

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

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

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

في Material Design، هناك أربعة أنواع من 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