Badge

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

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 puoi 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 stato: mostrano 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.

API surface

Utilizza il composable BadgedBox per implementare i badge nella tua applicazione. Si tratta di un contenitore. Puoi controllarne l'aspetto con questi due parametri principali:

• content: i contenuti componibili inclusi in BadgedBox. In genere Icon.
• badge: il componibile che appare come il badge sopra i contenuti. In genere, il composable 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. Nota quanto segue nel codice:

• BadgedBox funge da contenitore complessivo.
• 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 appare il badge. In questo caso, si tratta di un'icona di posta.

Ecco come appare:

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 del carrello degli acquisti con un badge che mostra il numero di articoli nel carrello dell'utente.

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

Questa implementazione è visualizzata come segue:

Risorse aggiuntive

• Materiale 3: badge
• BadgedBox
• Badge