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

バッジ

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

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

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 サーフェス

基本的な例

詳細な例

参考情報