Badge

Utilizza un badge per visualizzare un piccolo elemento visivo che indica lo stato o un valore numerico su un altro componibile. Di seguito sono riportati alcuni scenari comuni in cui potresti utilizzare un badge:

• Notifiche: mostra il numero di notifiche non lette su un'icona dell'app o una campanella di notifica.
• Messaggi: indica i messaggi nuovi o non letti 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 degli acquisti: mostra il numero di articoli nel carrello di un utente.
• Nuovi contenuti: evidenzia i nuovi contenuti o le nuove funzionalità disponibili per l'utente.

Piattaforma API

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

• content: i contenuti componibili contenuti in BadgedBox. In genere Icon.
• badge: il componibile che viene 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(
            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 container 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, è un'icona della posta.

Ecco come appare:

Esempio dettagliato

Lo snippet seguente mostra come visualizzare i valori nel badge 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(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

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

• The BadgedBox viene visualizzato solo quando il conteggio degli articoli è superiore a 0.
• Gli argomenti per containerColor e contentColor controllano l'aspetto del badge.
• Il Text componibile 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