Utilisez un badge pour afficher un petit élément visuel indiquant un état ou une valeur numérique sur un autre composable. Voici quelques cas courants d'utilisation d'un badge:
- Notifications: affichez le nombre de notifications non lues sur une icône d'application ou une 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", "en cours" 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.
Surface de l'API
Utilisez le composable BadgedBox
pour implémenter des badges dans votre application. En fin de compte, il s'agit d'un conteneur. Vous pouvez contrôler son apparence à l'aide des deux paramètres principaux suivants:
content
: contenu composable contenu dansBadgedBox
. GénéralementIcon
.badge
: composable qui apparaît en tant que badge par-dessus le contenu. Il s'agit généralement du composableBadge
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" ) } }
Cet exemple affiche un badge qui chevauche le composable Icon
fourni. Notez les points suivants dans le code:
BadgedBox
sert de conteneur global.- L'argument du paramètre
badge
deBadgedBox
estBadge
. CommeBadge
ne possède pas de ses propres arguments, l'application affiche le badge par défaut, qui est un petit cercle rouge. Icon
sert d'argument pour le paramètrecontent
deBadgedBox
. Il s'agit de 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:
Exemple détaillé
L'extrait de code suivant montre comment afficher dans le badge des valeurs 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") } } }
Cet exemple implémente une icône de panier avec un badge indiquant 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
etcontentColor
contrôlent l'apparence du badge. - Le composable
Text
pour l'emplacement de contenu deBadge
apparaît dans le badge. Dans ce cas, il affiche le nombre d'articles dans le panier.
Cette implémentation est la suivante :