Badges

Utilisez un badge pour afficher un petit élément visuel indiquant l'é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 une icône d'application. ou la cloche de notification.
  • Messages: indiquez les nouveaux messages ou les messages non lus dans une application de chat.
  • Mises à jour de l'état: affiche l'état d'une tâche, par exemple "terminée". dans votre progression. » ou « échec ».
  • Quantité panier: indique le nombre d'articles dans le panier d'un utilisateur.
  • Nouveaux contenus: mettez en avant de nouveaux contenus ou de nouvelles fonctionnalités disponibles pour l'utilisateur.
Autre exemple de composant de badge.
Figure 1. Exemples de badges

Surface de l'API

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

  • content: contenu composable contenu dans BadgedBox. Habituellement Icon
  • badge: composable qui apparaît en tant que badge sur le contenu. Il s'agit généralement du composable Badge dédié.

Exemple de base

Cet extrait de code présente 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 chevauche le composable Icon fourni. Remarque dans le code:

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

Voici comment cela se présente:

Un badge simple qui n'a aucun contenu.
Figure 2. Une implémentation minimale du badge.

Exemple détaillé

L'extrait de code suivant montre comment afficher dans le badge des valeurs répondre aux actions des utilisateurs.

@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 le nombre d'articles dans le panier de l'utilisateur.

  • L'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 :

Une 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