Badges

Utilisez un badge pour afficher un petit élément visuel indiquant un état ou une valeur numérique sur un autre composable. Voici quelques scénarios courants dans lesquels vous pouvez utiliser un badge :

  • Notifications : affichez le nombre de notifications non lues sur l'icône d'une application ou sur la cloche de notification.
  • Messages : indique les messages nouveaux ou non lus dans une application de chat.
  • Mises à jour de l'état : indiquent l'état d'une tâche, par exemple "terminée", "en cours" ou "échec".
  • Quantité dans le panier : affichez le nombre d'articles dans le panier d'un utilisateur.
  • Nouveaux contenus : mettez en avant les nouveaux contenus ou fonctionnalités disponibles pour l'utilisateur.
Différents exemples du composant Badge.
Figure 1. Exemples de badges

Surface d'API

Utilisez le composable BadgedBox pour implémenter des badges dans votre application. Il s'agit en fin de compte d'un conteneur. Vous contrôlez son apparence à l'aide de ces deux paramètres principaux :

  • content : contenu composable que contient BadgedBox. Habituellement Icon.
  • badge : composable qui apparaît sous forme de badge sur le contenu. Généralement, le composable Badge dédié.

Exemple de base

L'extrait de code suivant illustre une implémentation de base de BadgedBox :

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

Cet exemple affiche un badge qui se chevauche avec le composable Icon fourni. Notez les points suivants dans le code :

  • BadgedBox sert de conteneur global.
  • L'argument du paramètre badge de BadgedBox est Badge. Comme Badge n'a pas d'arguments propres, l'application affiche le badge par défaut, qui est un petit cercle rouge.
  • Icon sert d'argument pour le paramètre content de BadgedBox. Il s'agit de l'icône sur laquelle le badge s'affiche. Dans ce cas, il s'agit d'une icône de messagerie.

Voici à quoi il ressemble :

Un badge simple sans contenu.
Figure 2. Implémentation minimale d'un badge.

Exemple détaillé

L'extrait suivant montre comment afficher des valeurs dans le badge qui répondent aux actions de l'utilisateur.

@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

Cet exemple implémente une icône de panier avec un badge qui affiche le nombre d'articles dans le panier de l'utilisateur.

  • L'icône BadgedBox ne s'affiche que lorsque le nombre d'éléments est supérieur à 0.
  • Les arguments de containerColor et contentColor contrôlent l'apparence du badge.
  • Le composable Text pour l'emplacement de contenu de Badge apparaît dans le badge. Dans ce cas, il affiche le nombre d'articles dans le panier.

Cette implémentation est la suivante :

Implémentation de badge qui contient le nombre d'articles dans un panier.
Figure 3. Badge indiquant le nombre d'articles dans un panier.

Ressources supplémentaires