Odznaki

Użyj plakietki, aby wyświetlić mały element wizualny oznaczający stan lub wartość liczbową w innej składance. Oto kilka typowych sytuacji, w których możesz użyć plakietki:

  • Powiadomienia: wyświetlanie liczby nieprzeczytanych powiadomień na ikonie aplikacji lub dzwonku powiadomień.
  • Wiadomości: wskazują nowe lub nieprzeczytane wiadomości w aplikacji do czatu.
  • Aktualizacje stanu: pokazywanie stanu zadania, np. „ukończone”, „w toku” lub „nieudane”.
  • Liczba produktów w koszyku: wyświetla liczbę produktów w koszyku użytkownika.
  • Nowe treści: wyróżnienie nowych treści lub funkcji dostępnych dla użytkownika.
Inny przykład komponentu plakietki
Rysunek 1. Przykłady plakietek

Interfejs API

Aby zaimplementować plakietki w aplikacji, użyj komponentu BadgedBox. Jest to w podstawie kontener. Wygląd tego elementu możesz kontrolować za pomocą tych 2 głównych parametrów:

  • content: treści, które można łączyć, a które zawiera BadgedBox. ZwykleIcon.
  • badge: komponent, który pojawia się jako plakietka nad treścią. Zwykle jest to dedykowana kompozycja Badge.

Przykład podstawowy

Ten fragment kodu pokazuje podstawową implementację funkcji BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

Ten przykład pokazuje plakietkę, która nakłada się na podany element kompozycyjny Icon. Zwróć uwagę na te elementy kodu:

  • BadgedBox jest ogólnym kontenerem.
  • Argument parametru badge funkcji BadgedBox to Badge. Funkcja Badge nie ma własnych argumentów, więc aplikacja wyświetla domyślną plakietkę, czyli mały czerwony okrąg.
  • Wartość Icon jest argumentem parametru content funkcji BadgedBox. To ikona, nad którą pojawia się plakietka. W tym przypadku jest to ikona poczty.

Wygląda to tak:

Prosty znacznik bez treści.
Rysunek 2. Minimalna implementacja plakietki.

Szczegółowy przykład

Poniższy fragment kodu pokazuje, jak wyświetlać wartości na plakietce, które reagują na działania użytkowników.

@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

W tym przykładzie zastosowano ikonę koszyka z plakietką, która pokazuje liczbę produktów w koszyku użytkownika.

  • Element BadgedBox jest widoczny tylko wtedy, gdy liczba elementów jest większa niż 0.
  • Argumenty containerColor i contentColor określają wygląd plakietki.
  • Na plakietce wyświetla się kompozyt Text dla miejsca na treści Badge. W tym przypadku wyświetla liczbę produktów w koszyku.

Ta implementacja wygląda tak:

Implementacja plakietki, która zawiera liczbę produktów w koszyku.
Rysunek 3. Plakietka z liczbą produktów w koszyku.

Dodatkowe materiały