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

バッジ

バッジを使用して、ステータスを示す小さな視覚要素を表示します別のコンポーザブルに数値を指定できます一般的なシナリオはバッジを使うのも簡単です。

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

API サーフェス

BadgedBox コンポーザブルを使用して、アプリにバッジを実装します。これは、結局のところコンテナです。デザインは主に次の 2 つのキーで制御します。 parameters:

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

基本的な例

詳細な例

参考情報