Badges

Verwenden Sie ein Badge, um ein kleines visuelles Element zur Angabe des Status oder eines numerischen Werts in einem anderen Composable anzuzeigen. Hier sind einige häufige Szenarien, in denen Sie ein Badge verwenden können:

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen wird auf einem App-Symbol oder einer Benachrichtigungsglocke angezeigt.
• 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“.
• Warenkorbmenge: Zeigen Sie die Anzahl der Artikel im Einkaufswagen eines Nutzers an.
• Neue Inhalte: Heben Sie neue Inhalte oder Funktionen hervor, die dem Nutzer zur Verfügung stehen.

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. 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 übergeordneter Container.
• Das Argument für den Parameter badge von BadgedBox ist Badge. Da Badge keine eigenen Argumente hat, wird in der App das Standardbadge 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 { 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 Badge implementiert, auf dem die Anzahl der Artikel im Einkaufswagen des Nutzers angezeigt wird.

• Die 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 Badges festgelegt.
• 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