使用标记显示一个小的视觉元素，用于表示其他可组合项的状态或数值。以下是您可能会使用标志的一些常见场景：
- 通知：在应用图标或通知铃上显示未读通知的数量。
- 消息：用于指明聊天应用中的新消息或未读消息。
- 状态更新：显示任务的状态，如“完成”、“进行中”或“失败”。
- 购物车数量：显示用户购物车中的商品数量。
- 新内容：突出显示用户可用的新内容或新功能。
API Surface
使用 BadgedBox 可组合项在应用中实现标志。它最终是一个容器您可以使用以下两个主要参数控制其外观：
content：BadgedBox包含的可组合项内容。通常为Icon。badge：在内容上显示为标志的可组合项。通常是专用的Badge可组合项。
基本示例
以下代码段展示了 BadgedBox 的基本实现：
@Composable
fun BadgeExample() {
BadgedBox(
badge = {
Badge()
}
) {
Icon(
imageVector = Icons.Filled.Mail,
contentDescription = "Email"
)
}
}
此示例显示的标记与提供的 Icon 可组合项重叠。请注意代码中的以下内容：
BadgedBox用作整个容器。BadgedBox的badge参数的参数为Badge。由于Badge自身没有参数，因此应用会显示默认标记，即一个红色的小圆圈。Icon充当BadgedBox的content形参的参数。它是标志显示在前的图标。在此例中，它是邮件图标。
显示效果如下：
详细示例
以下代码段演示了如何在标记中显示响应用户操作的值。
@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")
}
}
}
下例实现的购物车图标带有一个标记，用于显示用户购物车中商品的数量。
- 仅当内容数量超过 0 时，
BadgedBox才会显示。 containerColor和contentColor的参数用于控制标志的外观。Badge的内容槽位的Text可组合项会显示在标记中。在这种情况下，系统会显示购物车中的商品数量。
此实现如下所示：
