使用徽章顯示小型的視覺元素，以表示其他可組合項的狀態或數值。以下是使用徽章的幾個常見情況：
- 「通知」：在應用程式圖示或通知鈴鐺顯示未讀通知的數量。
- 訊息：在即時通訊應用程式內顯示新的或未讀訊息。
- 狀態更新：顯示工作狀態，例如「完成」、「進行中」或「失敗」。
- 購物車數量：顯示使用者購物車中的商品數量。
- 新內容：醒目顯示使用者可用的新內容或功能。
API 介面
使用 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可組合項會顯示在標記中。在這種情況下，系統會顯示購物車中的商品數量。
實作內容如下所示：
