استخدام شارة لعرض عنصر مرئي صغير للإشارة إلى الحالة أو قيمة عددية على عنصر آخر قابل للإنشاء. فيما يلي بعض السيناريوهات الشائعة التي يمكنك استخدام شارة:
- الإشعارات: عرض عدد الإشعارات غير المقروءة على رمز تطبيق أو جرس الإشعارات.
- الرسائل: تشير إلى الرسائل الجديدة أو غير المقروءة داخل تطبيق محادثات.
- تعديلات الحالة: لعرض حالة مهمة، مثل "مكتملة" "في التقدم" أو "فشل".
- كمية سلة التسوّق: تعرض عدد السلع في سلّة التسوّق الخاصة بالمستخدم.
- المحتوى الجديد: يمكنك إبراز المحتوى أو الميزات الجديدة المتاحة للمستخدم.
مساحة عرض واجهة برمجة التطبيقات
استخدِم BadgedBox
القابل للإنشاء لتنفيذ الشارات في طلبك. أُنشأها جون هنتر، الذي كان متخصصًا
عبارة عن حاوية في النهاية. يمكنك التحكّم في مظهرها باستخدام هاتين الطريقتين
المَعلمات:
content
: المحتوى القابل للإنشاء الذي يتضمّنهBadgedBox
السعر المعتادIcon
badge
: العنصر القابل للإنشاء الذي يظهر كشارة فوق المحتوى عادةً ما تكون وحدةBadge
المخصّصة قابلة للإنشاء.
مثال أساسي
يعرض مقتطف الرمز هذا تنفيذًا أساسيًا لـ BadgedBox
:
@Composable fun BadgeExample() { BadgedBox( badge = { Badge() } ) { Icon( imageVector = Icons.Filled.Mail, contentDescription = "Email" ) } }
يعرض هذا المثال شارة تتداخل مع علامة Icon
المقدَّمة. ملاحظة
ما يلي في التعليمة البرمجية:
- تعمل
BadgedBox
كحاوية شاملة. - وسيطة المعلمة
badge
لـBadgedBox
هيBadge
. نظرًا لعدم احتواءBadge
على وسيطات خاصة به، يعرض التطبيق شارة، وهي عبارة عن دائرة حمراء صغيرة. - تعمل
Icon
كوسيطة للمعلمةcontent
لـBadgedBox
. أُنشأها جون هنتر، الذي كان متخصصًا هو الرمز الذي تظهر عليه الشارة. في هذه الحالة، يكون رمز بريد.
إليك الشكل الذي يظهر به:
مثال تفصيلي
يوضّح المقتطف التالي كيفية عرض القيم في الشارة والاستجابة لإجراءات المستخدم.
@Composable fun BadgeInteractiveExample() { var itemCount by remember { mutableStateOf(0) } Column( verticalArrangement = Arrangement.spacedBy(16.dp) ) { BadgedBox( badge = { if (itemCount > 0) { Badge( containerColor = Color.Red, contentColor = Color.White ) { Text("$itemCount") } } } ) { Icon( imageVector = Icons.Filled.ShoppingCart, contentDescription = "Shopping cart", ) } Button(onClick = { itemCount++ }) { Text("Add item") } } }
ينفذ هذا المثال رمز سلة تسوق مع شارة تعرض عدد السلع في سلّة المستخدِم
- لا يتم عرض
BadgedBox
إلا عندما يكون عدد العناصر أكبر من 0. - تتحكم وسيطات
containerColor
وcontentColor
في المظهر عن الشارة. - يظهر
Text
القابل للإنشاء في خانة المحتوىBadge
ضمن الشارة. في هذه الحالة، يتم عرض عدد العناصر في عربة التسوق.
تظهر طريقة التنفيذ هذه على النحو التالي: