Badge

Utilizza un badge per visualizzare un piccolo elemento visivo che indichi lo stato o un valore numerico su un altro composable. Ecco alcuni scenari comuni in cui puoi utilizzare un badge:

  • Notifiche: mostra il numero di notifiche non lette su un'icona dell'app o sul simbolo a forma di campana delle 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à 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.
Esempio diverso del componente badge.
Figura 1. Esempi di badge

API surface

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

  • content: i contenuti componibili inclusi in BadgedBox. In genere Icon.
  • badge: il composable visualizzato come 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 sopra la quale viene visualizzato il badge. In questo caso, si tratta di un'icona a forma di posta.

Ecco come appare:

Un semplice badge senza contenuti.
Figura 2. Un'implementazione minima del badge.

Esempio dettagliato

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

@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:

Un'implementazione del badge che contiene il numero di articoli in un carrello degli acquisti.
Figura 3. Un badge che mostra il numero di articoli in un carrello degli acquisti.

Risorse aggiuntive