使用徽章，在其他可組合函式上顯示小型視覺元素，用於表示狀態或數值。以下列舉幾種可能會使用徽章的常見情況：
- 通知：在應用程式圖示或通知鈴鐺上顯示未讀通知數量。
- 訊息：指出即時通訊應用程式中的新訊息或未讀訊息。
- 狀態更新：顯示工作狀態，例如「已完成」、「進行中」或「失敗」。
- 購物車數量：顯示使用者購物車中的商品數量。
- 新內容：強調使用者可使用的新內容或功能。
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可組合函式會顯示在徽章中。在本例中，系統會顯示購物車中的商品數量。
此實作方式如下所示：
