バッジ

バッジは、別のコンポーザブルのステータスや数値を表す小さな視覚要素を表示するために使用します。バッジを使用する一般的なシナリオを次に示します。

• 通知: アプリ アイコンまたは通知ベルに未読の通知の数を表示します。
• メッセージ: チャット アプリケーション内の新着メッセージまたは未読メッセージを示します。
• ステータスの更新: タスクのステータス（完了、進行中、失敗など）を表示します。
• カート内の商品数: ユーザーのショッピング カート内の商品数を表示します。
• 新しいコンテンツ: ユーザーが利用できる新しいコンテンツや機能をハイライト表示します。

API サーフェス

BadgedBox コンポーザブルを使用して、アプリケーションにバッジを実装します。最終的にはコンテナになります。外観は、次の 2 つのメイン パラメータで制御します。

• 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 { mutableIntStateOf(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

この例では、ユーザーのカート内のアイテム数を表示するバッジ付きのショッピング カート アイコンを実装しています。

• BadgedBox は、アイテム数が 0 を超える場合にのみ表示されます。
• containerColor と contentColor の引数は、バッジの外観を制御します。
• Badge のコンテンツ スロットの Text コンポーザブルがバッジ内に表示されます。この場合、カート内のアイテム数が表示されます。

これを実装すると次のようになります。

参考情報

• Material 3 - バッジ
• BadgedBox
• Badge