تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

الشارات

استخدِم شارة لعرض عنصر مرئي صغير يشير إلى الحالة أو قيمة رقمية في دالة مركّبة أخرى. فيما يلي بعض السيناريوهات الشائعة التي قد تستخدم فيها شارة:

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

أمثلة مختلفة على مكوّن الشارة — **الشكل 1.** أمثلة على الشارات

مساحة عرض واجهة برمجة التطبيقات

استخدِم الدالة المركّبة BadgedBox لتنفيذ الشارات في تطبيقك. إنّها في النهاية حاوية. يمكنك التحكّم في مظهرها من خلال هذين المعاملَين الأساسيَين:

‫content: المحتوى المركّب الذي يتضمّنه BadgedBox. السعر العادي هو ‎Icon.
‫badge: الدالة المركّبة التي تظهر كشارة فوق المحتوى. عادةً ما تكون الدالة المركّبة المخصّصة Badge.

مثال أساسي

يعرض مقتطف الرمز هذا تنفيذًا أساسيًا لـ BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            painter = rememberVectorPainter(AppIcons.Mail),
            contentDescription = "Email"
        )
    }
}Badges.kt

يعرض هذا المثال شارة تتداخل مع الدالة المركّبة Icon المقدَّمة. لاحظ ما يلي في الكود:

يُستخدَم BadgedBox كحاوية عامة.
الوسيطة الخاصة بالمَعلمة badge في BadgedBox هي Badge. بما أنّ Badge لا يتضمّن أي وسيطات خاصة به، يعرض التطبيق الشارة التلقائية، وهي دائرة حمراء صغيرة.
يُستخدَم Icon كوسيطة للمعلَمة content في BadgedBox. وهو الرمز الذي تظهر فوقه الشارة. في هذه الحالة، هو رمز بريد.

ويظهر على النحو التالي:

شارة بسيطة لا تحتوي على أي محتوى — **الشكل 2.** مثال يوضّح تنفيذ شارة بسيطة

مثال تفصيلي

يوضّح المقتطف التالي كيفية عرض القيم في الشارة التي تستجيب لإجراءات المستخدم.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                painter = rememberVectorPainter(AppIcons.ShoppingCart),
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}Badges.kt

ينفّذ هذا المثال رمز سلّة تسوّق مع شارة تعرض عدد السلع في سلّة المستخدم.

لا يظهر BadgedBox إلا عندما يكون عدد السلع أكبر من 0.
تتحكّم الوسيطتان containerColor وcontentColor في مظهر الشارة.
تظهر الدالة المركّبة Text لخانة المحتوى في Badge داخل الشارة. في هذه الحالة، يعرض عدد السلع في سلة التسوّق.

يظهر هذا التنفيذ على النحو التالي:

الشارات تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

مساحة عرض واجهة برمجة التطبيقات

مثال أساسي

مثال تفصيلي

مراجع إضافية

الشارات