إنشاء زر إجراء عائم

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

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

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

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

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

توافق الإصدار

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة تطوير البرامج (SDK) لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو مستوى أعلى.

التبعيات

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

  implementation platform('androidx.compose:compose-bom:2025.01.01')

إنشاء زر إجراء عائم أساسي

لإنشاء زر إجراءات عائم عام، استخدِم العنصر القابل للتجميع الأساسي 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

النتيجة

النقاط الرئيسية

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

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

z## المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

عرض المكونات التفاعلية

تعرَّف على كيفية استخدام الدوال القابلة للتجميع لإنشاء مكونات جميلة لواجهة المستخدم بسهولة استنادًا إلى نظام التصميم المتعدّد الأبعاد.

مجموعة الأدلة السريعة

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.

الانتقال إلى الأسئلة الشائعة تقديم ملاحظات