Badge

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 in BadgedBox. In genere Icon.
• badge: il componibile che appare come il badge sopra i contenuti. In genere si tratta dell'elemento componibile 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. Tieni presente quanto segue nel codice:

• BadgedBox funge da contenitore complessivo.
• L'argomento del 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 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")
        }
    }
}
Badges.kt

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 e contentColor controllano l'aspetto del badge.
• Il componibile Text per l'area dei contenuti di Badge 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:

Risorse aggiuntive

• Materiale 3 - Badge
• BadgedBox
• Badge