このページは Cloud Translation API によって翻訳されました。

バッジ

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

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

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 パラメータの引数として機能します。バッジが表示されるアイコンです。この場合はメールアイコンです。

次のように表示されます。

コンテンツを含まないシンプルなバッジ。 — **図 2.** 最小限のバッジの実装。

詳細な例

次のスニペットは、ユーザー操作に応答するバッジに値を表示する方法を示しています。

@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 コンポーザブルが表示されます。この場合は、カート内の商品アイテムの数が表示されます。

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

バッジ

API サーフェス

基本的な例

詳細な例

参考情報