Badges

Mit einem Badge können Sie ein kleines visuelles Element anzeigen, um den Status oder einen numerischen Wert in einem anderen Composable anzugeben. 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: Zeigt 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 für den Nutzer verfügbar sind.

API-Oberfläche

Verwenden Sie die zusammensetzbare Funktion 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. Normalerweise Icon.
• badge: Die zusammensetzbare Funktion, die als Badge über dem Inhalt angezeigt wird. In der Regel die dedizierte 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 sich mit der bereitgestellten zusammensetzbaren Funktion Icon überschneidet. Beachten Sie Folgendes im Code:

• BadgedBox dient als übergeordneter Container.
• 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 Inhalts-Slot 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