バッジ

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

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

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 { 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")
        }
    }
}
Badges.kt

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

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

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

参考情報

• 資料 3 - バッジ
• BadgedBox
• Badge