Badge

Utilizza un badge per visualizzare 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 non lette sull'icona di un'app o sulla campana delle notifiche.
• Messaggi: indicano messaggi nuovi o da leggere all'interno di un'applicazione di chat.
• Aggiornamenti di stato: mostra lo stato di un'attività, ad esempio "completata", "in corso" o "non riuscita".
• Quantità nel 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.

Piattaforma API

Utilizza il componibile BadgedBox per implementare i badge nella tua applicazione. In definitiva, è un container. Puoi controllarne l'aspetto con questi due parametri principali:

• content: i contenuti componibili contenuti in BadgedBox. In genere Icon.
• badge: il composable visualizzato come badge sopra i contenuti. In genere, il componibile Badge dedicato.

Esempio di base

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

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            painter = rememberVectorPainter(AppIcons.Mail),
            contentDescription = "Email"
        )
    }
}
Badges.kt

Questo esempio mostra un badge che si sovrappone al composable Icon fornito. Nel codice, tieni presente quanto segue:

• 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 su cui viene visualizzato il badge. In questo caso, si tratta di un'icona di posta.

Ecco come appare:

Esempio dettagliato

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

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                painter = rememberVectorPainter(AppIcons.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.

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

Ecco come appare la barra:

Risorse aggiuntive

• Material 3 - Badge
• BadgedBox
• Badge