תגים

אפשר להשתמש בתג כדי להציג רכיב חזותי קטן שמייצג סטטוס או ערך מספרי ברכיב מורכב אחר. ריכזנו כאן כמה תרחישים נפוצים שבהם כדאי להשתמש בתג:

  • התראות: הצגת מספר ההתראות שלא נקראו על סמל האפליקציה או על פעמון ההתראות.
  • הודעות: סימון הודעות חדשות או הודעות שלא נקראו באפליקציית צ'אט.
  • עדכוני סטטוס: הצגת הסטטוס של משימה, למשל 'הושלמה', 'בטיפול' או 'נכשלה'.
  • כמות בעגלת הקניות: הצגת מספר הפריטים בעגלת הקניות של המשתמש.
  • תוכן חדש: הדגשת תוכן או תכונות חדשים שזמינים למשתמש.
דוגמה שונה לרכיב התג.
איור 1. דוגמאות לתגים

ממשק API

משתמשים ברכיב ה-composable BadgedBox כדי להטמיע תגים באפליקציה. בסופו של דבר, זהו מאגר. אפשר לשלוט במראה שלו באמצעות שני הפרמטרים העיקריים הבאים:

  • content: התוכן שאפשר ליצור ממנו BadgedBox. בדרך כלל Icon.
  • badge: הרכיב הניתן להתאמה אישית שמופיע בתור התג מעל התוכן. בדרך כלל, ה-composable הייעודי של Badge.

דוגמה בסיסית

קטע הקוד הזה מציג הטמעה בסיסית של BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

בדוגמה הזו מוצג תג שמכסה את הרכיב הקומפוזיציבי Icon שסופק. שימו לב לפרטים הבאים בקוד:

  • BadgedBox משמש כמאגר הכולל.
  • הארגומנט של הפרמטר badge של BadgedBox הוא Badge. מכיוון של-Badge אין ארגומנטים משלו, באפליקציה יוצג תג ברירת המחדל, שהוא עיגול אדום קטן.
  • Icon משמש כארגומנט לפרמטר content של BadgedBox. זהו הסמל שמעליו מופיע התג. במקרה הזה, זהו סמל של אימייל.

כך זה נראה:

תג פשוט שלא מכיל תוכן.
איור 2. הטמעה מינימלית של תגים.

דוגמה מפורטת

קטע הקוד הבא מראה איך אפשר להציג במדבקה ערכים שתגובות לפעולות של המשתמשים.

@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")
        }
    }
}
Badges.kt

בדוגמה הזו מוטמע סמל של עגלת קניות עם תג שבו מוצג מספר הפריטים בעגלת הקניות של המשתמש.

  • הערך BadgedBox מוצג רק כאשר מספר הפריטים גדול מ-0.
  • הארגומנטים של containerColor ו-contentColor קובעים את המראה של התג.
  • הרכיב הניתן להתאמה אישית Text של מקום התוכן ב-Badge מופיע בתוך התג. במקרה הזה, מוצג מספר הפריטים בעגלת הקניות.

ההטמעה הזו נראית כך:

הטמעת תג שמכיל את מספר הפריטים בעגלת הקניות.
איור 3. תג שבו מוצג מספר הפריטים בעגלת הקניות.

מקורות מידע נוספים