Badges

Verwenden Sie ein Badge, das ein kleines visuelles Element zur Anzeige des Status anzeigt. oder einen numerischen Wert in einer anderen zusammensetzbaren Funktion. Hier sind ein paar häufige Szenarien, können Sie ein Logo verwenden:

• Benachrichtigungen: Die Anzahl der ungelesenen Benachrichtigungen wird auf einem App-Symbol angezeigt. oder die Benachrichtigungsglocke.
• Nachrichten: Geben Sie neue oder ungelesene Nachrichten in einer Chatanwendung an.
• Statusupdates: Zeigt den Status einer Aufgabe an, z. B. „Erledigt“, „in „Fortschritt“. oder „fehlgeschlagen“.
• 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.

<ph type="x-smartling-placeholder">

</ph>

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

• content: Der zusammensetzbare Inhalt, den die BadgedBox enthält. Normalerweise 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. Hinweis Folgendes im Code:

• BadgedBox dient als Gesamtcontainer.
• Das Argument für den Parameter badge von BadgedBox ist Badge. Da Badge keine eigenen Argumente hat, zeigt die App die Standardargumente an. das ein kleiner roter Kreis ist.
• 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:

<ph type="x-smartling-placeholder">

</ph>

Ausführliches Beispiel

Das folgende Snippet zeigt, wie Sie Werte im Logo darstellen 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 Warenkorb des Nutzers.

• Das Symbol BadgedBox wird nur angezeigt, wenn die Anzahl der Elemente größer als 0 ist.
• Die Argumente für containerColor und contentColor steuern das Aussehen. des Logos.
• Die zusammensetzbare Funktion Text für die Inhaltsfläche von Badge erscheint im das Logo. In diesem Fall wird die Anzahl der Artikel im Einkaufswagen angezeigt.

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen

• Material 3 – Logos
• BadgedBox
• Badge