תגים

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

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

פלטפורמת API

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

• content: התוכן הקומפוזבילי שה-BadgedBox מכיל. בדרך כלל Icon
• badge: התוכן הקומפוזבילי שמופיע כתג מעל התוכן. בדרך כלל התוכן הקומפוזבילי הייעודי 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. הוא הוא הסמל שמעליו מופיע התג. במקרה הזה, מדובר בסמל של אימייל.

כך זה נראה:

דוגמה מפורטת

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

@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 – תגים
• BadgedBox
• Badge