Badges

Mit einem Logo können Sie ein kleines visuelles Element anzeigen, um den Status oder einen numerischen Wert für ein anderes Composeable anzugeben. 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 der Benachrichtigungsglocke angezeigt.
  • Nachrichten: Gibt neue oder ungelesene Nachrichten in einer Chat-Anwendung an.
  • Statusaktualisierungen: Hier sehen Sie den Status einer Aufgabe, z. B. „Abgeschlossen“, „In Bearbeitung“ oder „Fehlgeschlagen“.
  • Warenkorbmenge: 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.
Anderes Beispiel für die Badge-Komponente.
Abbildung 1: Beispiele für Logos

API-Oberfläche

Verwenden Sie das BadgedBox-Kompositelement, 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: Das Element, das als Symbol ü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, wird in der App das Standardsymbol angezeigt, ein kleiner roter 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:

Ein einfaches Logo ohne Inhalt.
Abbildung 2: Eine minimale Logo-Implementierung.

Detailliertes 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:

Ein Logo, das die Anzahl der Artikel in einem Einkaufswagen enthält.
Abbildung 3 Ein Symbol, das die Anzahl der Artikel in einem Einkaufswagen anzeigt.

Weitere Informationen