徽章

使用标记显示一个表示状态的小视觉元素 或其他可组合项的数值。这里是一些常见场景 则可以使用标记：

• 通知：在应用图标上显示未读通知的数量 或通知铃
• 消息：用于指明聊天应用中的新消息或未读消息。
• 状态更新：显示任务的状态，例如“完成”"在 进度”或“失败”。
• 购物车数量：显示用户购物车中的商品数量。
• 新内容：突出显示用户可用的新内容或新功能。

API Surface

使用 BadgedBox 可组合项在应用中实现标志。它 实际上是一个容器您可以通过以下两种主要方式来控制其外观： 参数：

• content：BadgedBox 包含的可组合项内容。一般价格 Icon。
• badge：在内容上显示为标志的可组合项。 通常是专用的 Badge 可组合项。

基本示例

以下代码段展示了 BadgedBox 的基本实现：

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

此示例显示的标记与提供的 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")
        }
    }
}
Badges.kt

此示例实现了一个带标志的购物车图标，该标志显示 用户购物车中的商品数量。

• 仅当内容数量超过 0 时，BadgedBox 才会显示。
• containerColor 和 contentColor 的参数控制外观 。
• Badge 的内容槽位的 Text 可组合项显示在 徽章。在这种情况下，系统会显示购物车中的商品数量。

此实现如下所示：

其他资源

• Material 3 - 标志
• BadgedBox
• Badge