Badge

Utilizza un badge per visualizzare un piccolo elemento visivo per indicare lo stato o un valore numerico in un altro componente. Ecco alcuni scenari comuni in cui potresti utilizzare un badge:

• Notifiche: mostra il numero di notifiche da leggere su un'icona dell'app o sulla campana delle notifiche.
• Messaggi: indica i messaggi nuovi o non letti all'interno di un'applicazione di chat.
• Aggiornamenti di stato: mostrano lo stato di un'attività, ad esempio "completata", "in corso" o "non riuscita".
• Quantità carrello: mostra il numero di articoli nel carrello di un utente.
• Nuovi contenuti: metti in evidenza i nuovi contenuti o le nuove funzionalità disponibili per l'utente.

Superficie API

Utilizza il composable BadgedBox per implementare i badge nella tua applicazione. In definitiva, si tratta di un contenitore. Puoi controllare il suo aspetto con questi due parametri principali:

• content: i contenuti componibili contenuti in BadgedBox. In genere Icon.
• badge: il composable che appare come badge sopra i contenuti. In genere il composable Badge dedicato.

Esempio di base

Questo snippet di codice mostra un'implementazione di base di BadgedBox:

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

Questo esempio mostra un badge che si sovrappone al componibile Icon fornito. Nota quanto segue nel codice:

• BadgedBox funge da contenitore generale.
• L'argomento per il parametro badge di BadgedBox è Badge. Poiché Badge non ha argomenti propri, l'app mostra il badge predefinito, ovvero un piccolo cerchio rosso.
• Icon funge da argomento per il parametro content di BadgedBox. È l'icona sopra la quale viene visualizzato il badge. In questo caso, si tratta di un'icona a forma di busta.

Ecco come appare:

Esempio dettagliato

Il seguente snippet mostra come visualizzare i valori nel badge che rispondono alle azioni dell'utente.

@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

Questo esempio implementa un'icona del carrello con un badge che mostra il numero di articoli nel carrello dell'utente.

• Il BadgedBox viene visualizzato solo quando il conteggio degli elementi è superiore a 0.
• Gli argomenti per containerColor e contentColor controllano l'aspetto del badge.
• Il composable Text per lo spazio dei contenuti di Badge viene visualizzato all'interno del badge. In questo caso, viene visualizzato il numero di articoli nel carrello.

Questa implementazione viene visualizzata nel seguente modo:

Risorse aggiuntive

• Materiale 3 - Badge
• BadgedBox
• Badge