使用徽章來顯示小型的視覺元素,來表示狀態 或是另一個可組合函式的數值以下列舉幾個常見情況 可以使用徽章:
- 通知:在應用程式圖示上顯示未讀通知的數量 或通知鈴鐺圖示。
- 訊息:在即時通訊應用程式內顯示新的或未讀訊息。
- 狀態更新:顯示工作狀態,例如「完成」"英吋 進度」或「失敗」
- 購物車數量:顯示使用者購物車中的商品數量。
- 新內容:醒目顯示使用者可用的新內容或功能。
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
可組合項會顯示於 徽章。在這種情況下,系統會顯示購物車中的商品數量。
實作內容如下所示: