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 inBadgedBox
. In genereIcon
.badge
: il composable che appare come badge sopra i contenuti. In genere il composableBadge
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" ) } }
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
diBadgedBox
èBadge
. PoichéBadge
non ha argomenti propri, l'app mostra il badge predefinito, ovvero un piccolo cerchio rosso. Icon
funge da argomento per il parametrocontent
diBadgedBox
. È 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") } } }
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
econtentColor
controllano l'aspetto del badge. - Il composable
Text
per lo spazio dei contenuti diBadge
viene visualizzato all'interno del badge. In questo caso, viene visualizzato il numero di articoli nel carrello.
Questa implementazione viene visualizzata nel seguente modo:
