Utilizza un badge per mostrare un piccolo elemento visivo che indica lo stato o un valore numerico su un altro componibile. Ecco alcuni scenari comuni in cui potresti utilizzare un badge:
- Notifiche: mostra il numero di notifiche da leggere su un'icona dell'app o una campana per le notifiche.
- Messaggi: indica i messaggi nuovi o da leggere all'interno di un'applicazione di chat.
- Aggiornamenti dello stato: mostra lo stato di un'attività, ad esempio "completata", "in corso" o "non riuscita".
- Quantità del carrello: mostra il numero di articoli nel carrello degli acquisti di un utente.
- Nuovi contenuti: metti in evidenza i nuovi contenuti o le nuove funzionalità a disposizione dell'utente.
Piattaforma API
Utilizza il componibile BadgedBox
per implementare i badge nella tua applicazione. In ultima analisi, è un container. Puoi controllare l'aspetto con questi due
parametri principali:
content
: il contenuto componibile incluso inBadgedBox
. In genereIcon
.badge
: il componibile che appare come il badge sopra i contenuti. In genere si tratta dell'elemento componibileBadge
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. Tieni presente quanto segue nel codice:
BadgedBox
funge da contenitore complessivo.- L'argomento del 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 su cui appare il badge. In questo caso, si tratta di un'icona a forma di posta.
Ecco come si presenta:
Esempio dettagliato
Lo snippet seguente illustra come visualizzare nel badge i valori in risposta alle azioni degli utenti.
@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 di carrello degli acquisti con un badge che mostra il numero di articoli nel carrello dell'utente.
- L'icona
BadgedBox
viene visualizzata solo quando il numero di elementi è superiore a 0. - Gli argomenti per
containerColor
econtentColor
controllano l'aspetto del badge. - Il componibile
Text
per l'area dei contenuti diBadge
viene visualizzato all'interno del badge. In questo caso, viene visualizzato il numero di articoli contenuti nel carrello.
Questa implementazione si presenta nel seguente modo: