Badges

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

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen wird auf einem App-Symbol oder einer Benachrichtigungsglocke angezeigt.
• Nachrichten: Zeigt neue oder ungelesene Nachrichten in einer Chat-Anwendung an.
• Statusaktualisierungen: Zeigen den Status einer Aufgabe an, z. B. „Abgeschlossen“, „In Bearbeitung“ oder „Fehlgeschlagen“.
• Menge im Einkaufswagen: Zeigt die Anzahl der Artikel im Einkaufswagen eines Nutzers an.
• Neue Inhalte: Heben Sie neue Inhalte oder Funktionen hervor, die für den Nutzer verfügbar sind.

API-Oberfläche

Verwenden Sie die komponierbare Funktion BadgedBox, um Badges in Ihrer Anwendung zu implementieren. Es ist letztendlich ein Container. Sie steuern die Darstellung mit den folgenden beiden Hauptparametern:

• content: Der zusammensetzbare Inhalt, den die BadgedBox enthält. In der Regel Icon.
• badge: Das Compose-Element, das als Badge über dem Inhalt angezeigt wird. In der Regel das dedizierte Badge-Composable.

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 die angegebene zusammensetzbare Funktion Icon überlappt. Beachten Sie im Code Folgendes:

• 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. Das ist das Symbol, über dem das Badge angezeigt wird. In diesem Fall ist es ein E‑Mail-Symbol.

So wird es dargestellt:

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, das die Anzahl der Artikel im Einkaufswagen des Nutzers anzeigt.

• BadgedBox wird nur angezeigt, wenn die Anzahl der Artikel größer als 0 ist.
• Die Argumente für containerColor und contentColor steuern die Darstellung des Logos.
• Das Compose-Element Text für den Inhalts-Slot von Badge wird im Badge 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