Badges

Mit einem Badge können Sie ein kleines visuelles Element verwenden, um den Status oder einen numerischen Wert in einem anderen Composable darzustellen. Hier sind einige häufige Szenarien, in denen Sie ein Badge verwenden können:

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen auf einem App-Symbol oder einer Benachrichtigungsglocke anzeigen.
• Nachrichten: Zeigen neue oder ungelesene Nachrichten in einer Chatanwendung an.
• Statusaktualisierungen: Hier wird der Status einer Aufgabe angezeigt, z. B. „Abgeschlossen“, „Wird ausgeführt“ oder „Fehler“.
• Einkaufswagenmenge: Die Anzahl der Artikel im Einkaufswagen eines Nutzers.
• Neue Inhalte: Heben Sie neue Inhalte oder Funktionen hervor, die dem Nutzer zur Verfügung stehen.

API-Oberfläche

Verwenden Sie die Composable BadgedBox, um Badges in Ihrer Anwendung zu implementieren. Letztendlich ist es ein Container. Sie können die Darstellung mit diesen beiden Hauptparametern steuern:

• content: Der zusammensetzbare Inhalt, den BadgedBox enthält. In der Regel Icon.
• badge: Die Composable, die als Badge über dem Inhalt angezeigt wird. In der Regel ist dies die spezielle zusammensetzbare Funktion Badge.

Einfaches Beispiel

Dieses Code-Snippet zeigt eine einfache Implementierung von BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

In diesem Beispiel wird ein Badge angezeigt, das das bereitgestellte Icon-Composable überlappt. Beachten Sie im Code Folgendes:

• BadgedBox dient als Gesamtcontainer.
• Das Argument für den Parameter badge von BadgedBox ist Badge. Da Badge keine eigenen Argumente hat, wird in der App das Standard-Badge angezeigt, ein kleiner roter Kreis.
• Icon dient als Argument für den Parameter content von BadgedBox. Es ist das Symbol, über dem das Badge angezeigt wird. In diesem Fall ist es ein E‑Mail-Symbol.

So sieht das aus:

Detailliertes Beispiel

Das folgende Snippet zeigt, wie Sie Werte im Badge anzeigen können, die auf Nutzeraktionen reagieren.

@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

In diesem Beispiel wird ein Einkaufswagensymbol mit einem Badge implementiert, auf dem die Anzahl der Artikel im Einkaufswagen des Nutzers angezeigt wird.

• Das BadgedBox wird nur angezeigt, wenn die Anzahl der Elemente größer als 0 ist.
• Mit den Argumenten für containerColor und contentColor wird die Darstellung des Logos gesteuert.
• Die zusammensetzbare Funktion Text für den Inhaltsslot von Badge wird innerhalb des Badges angezeigt. In diesem Fall wird die Anzahl der Artikel im Einkaufswagen angezeigt.

Diese Implementierung sieht so aus:

Zusätzliche Ressourcen

• Material 3 – Badges
• BadgedBox
• Badge