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

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

إليك حالات الاستخدام الثلاث التي قد تستخدم فيها مربّع الإجراء السريع:

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

في أسلوب 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