שימוש בתג כדי להציג רכיב חזותי קטן שמציין את הסטטוס או ערך מספרי בתוכן קומפוזבילי אחר. לפניכם כמה תרחישים נפוצים שבהם ייתכן שתשתמשו בתג:
- התראות: הצגת מספר ההתראות שלא נקראו בסמל של אפליקציה או פעמון ההתראות.
- הודעות: סימון הודעות חדשות או הודעות שלא נקראו באפליקציית צ'אט.
- עדכוני סטטוס: הצגת הסטטוס של משימה, למשל 'בוצעה', "ב- ," או 'נכשל'.
- כמות עגלת הקניות: הצגת מספר הפריטים בעגלת הקניות של המשתמש.
- תוכן חדש: הדגשה של תכונות או תכנים חדשים שזמינים למשתמש.
פלטפורמת API
צריך להשתמש בתוכן הקומפוזבילי 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
מופיע בתוך . במקרה הזה, מוצג מספר הפריטים בעגלת הקניות.
היישום הזה נראה כך: