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

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

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

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

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

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

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

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

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

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

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

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

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

@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