Badges

Verwenden Sie ein Badge, um ein kleines visuelles Element zur Anzeige eines Status oder eines numerischen Werts in einer anderen zusammensetzbaren Funktion darzustellen. Hier sind einige häufige Szenarien, in denen Sie ein Logo verwenden können:

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen wird auf einem App-Symbol oder einer Benachrichtigungsglocke angezeigt.
• Nachrichten: Geben Sie neue oder ungelesene Nachrichten in einer Chatanwendung an.
• Statusupdates: Zeigt den Status einer Aufgabe an, z. B. „Abgeschlossen“, „In Bearbeitung“ oder „Fehler“.
• Einkaufswagenmenge: Hier wird die Anzahl der Artikel im Einkaufswagen eines Nutzers angezeigt.
• Neue Inhalte: Hiermit können Sie neue Inhalte oder Funktionen hervorheben, die für Nutzer verfügbar sind.

Abbildung 1. Beispiele für Logos

API-Oberfläche

Verwende die zusammensetzbare Funktion BadgedBox, um Logos in deiner App zu implementieren. Es ist letztendlich ein Container. Sie können die Darstellung mit diesen beiden Hauptparametern festlegen:

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

Einfaches Beispiel

Dieses Code-Snippet zeigt eine grundlegende Implementierung von BadgedBox:

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

In diesem Beispiel wird ein Logo angezeigt, das sich mit der angegebenen zusammensetzbaren Funktion Icon überschneidet. 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, zeigt die Anwendung das Standardbadge an, also einen kleinen roten Kreis.
• Icon dient als Argument für den Parameter content von BadgedBox. Es ist das Symbol, über dem das Logo angezeigt wird. In diesem Fall ist es ein E-Mail-Symbol.

So sieht es aus:

Abbildung 2: Eine minimale Implementierung des Logos.

Wichtig :Sie können jede zusammensetzbare Funktion an den Content-Slot der BadgedBox-Funktion übergeben. Sie könnten daher ein Logo erstellen, das auf einem Button, einem Image oder einer anderen zusammensetzbaren Funktion angezeigt wird.

Ausführliches Beispiel

Das folgende Snippet zeigt, wie Werte im Logo dargestellt werden können, die auf Nutzeraktionen reagieren.

@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

In diesem Beispiel wird ein Einkaufswagensymbol mit einem Logo implementiert, das die Anzahl der Artikel im Einkaufswagen des Nutzers anzeigt.

• Das Symbol 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 festgelegt.
• Die zusammensetzbare Funktion Text für die Inhaltsfläche von Badge wird im Logo angezeigt. In diesem Fall wird die Anzahl der Artikel im Einkaufswagen angezeigt.

Diese Implementierung sieht so aus:

Abbildung 3: Ein Badge, das die Anzahl der Artikel in einem Einkaufswagen anzeigt.

Zusätzliche Ressourcen

• Material 3 – Logos
• BadgedBox
• Badge