使用标记显示一个小的视觉元素,用于表示其他可组合项的状态或数值。以下是您可能会使用标志的一些常见场景:
- 通知:在应用图标或通知铃上显示未读通知的数量。
- 消息:用于指明聊天应用中的新消息或未读消息。
- 状态更新:显示任务的状态,如“完成”、“进行中”或“失败”。
- 购物车数量:显示用户购物车中的商品数量。
- 新内容:突出显示用户可用的新内容或新功能。
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
可组合项会显示在标记中。在这种情况下,系统会显示购物车中的商品数量。
此实现如下所示: