Badges

Mit einem Logo können Sie ein kleines visuelles Element anzeigen, um den Status oder einen numerischen Wert in einem anderen Composeable anzugeben. Im Folgenden finden Sie einige häufige Anwendungsfälle für Logos:

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen wird auf einem App-Symbol oder der Benachrichtigungsglocke angezeigt.
• Nachrichten: Gibt neue oder ungelesene Nachrichten in einer Chat-Anwendung 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: Heben Sie neue Inhalte oder Funktionen hervor, die für den Nutzer verfügbar sind.

API-Oberfläche

Verwenden Sie das BadgedBox-Element, um Logos in Ihrer App zu implementieren. Es ist letztendlich ein Container. Die Darstellung lässt sich mit den folgenden beiden Hauptparametern steuern:

• content: Die zusammensetzbaren Inhalte, die die BadgedBox enthält. In der Regel Icon.
• badge: Die zusammensetzbare Funktion, die als Logo über dem Inhalt angezeigt wird. In der Regel ist das die spezielle Badge-Komposition.

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 das bereitgestellte Icon-Kompositelement ü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, zeigt die Anwendung das Standardbadge an, also einen kleinen roten Kreis.
• Icon dient als Argument für den Parameter content von BadgedBox. Das Symbol, über dem das Gütesiegel angezeigt wird. In diesem Fall ist es ein E-Mail-Symbol.

Das sieht dann so aus:

Ausführliches Beispiel

Das folgende Snippet zeigt, wie Sie Werte im Logo anzeigen 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 Artikelanzahl größer als 0 ist.
• Mit den Argumenten für containerColor und contentColor wird die Darstellung des Logos gesteuert.
• Das Text-Element für den Inhalts-Slot von Badge wird im Logo angezeigt. In diesem Fall wird die Anzahl der Artikel im Einkaufswagen angezeigt.

Diese Implementierung sieht so aus:

Weitere Informationen

• Material 3 – Logos
• BadgedBox
• Badge