Odznaki

Używaj plakietki do wyświetlania małego elementu wizualnego wskazującego status lub wartości liczbowej innego elementu kompozycyjnego. Oto kilka typowych scenariuszy, w których możesz używać plakietki:

  • Powiadomienia: na ikonie aplikacji lub dzwonku powiadomień wyświetla liczbę nieprzeczytanych powiadomień.
  • Wiadomości: oznaczaj nowe lub nieprzeczytane wiadomości w aplikacji do obsługi czatu.
  • Aktualizacje stanu: pokazuj stan 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óżnij nowe treści lub funkcje dostępne dla użytkowników.
Inny przykład komponentu plakietki.
Rysunek 1. Przykłady plakietek

Interfejs API

Aby wdrożyć plakietki w aplikacji, użyj funkcji kompozycyjnej BadgedBox. To w końcu kontener. Do jego wyświetlania służą 2 główne parametry:

  • content: treść kompozycyjna zawarta w elemencie BadgedBox. Zwykle Icon.
  • badge: element kompozycyjny wyświetlany jako plakietka na treści. Zwykle jest to dedykowana funkcja kompozycyjna Badge.

Podstawowy przykład

Ten fragment kodu przedstawia podstawową implementację elementu BadgedBox:

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

W tym przykładzie wyświetla się plakietka, która nakłada się na podany element kompozycyjny Icon. Pamiętaj o tych uwagach w kodzie:

  • BadgedBox to ogólny kontener.
  • Argument parametru badge w BadgedBox to Badge. Badge nie ma własnych argumentów, więc aplikacja wyświetla domyślną plakietkę w postaci małego czerwonego okręgu.
  • Icon jest argumentem parametru content w tabeli BadgedBox. To ikona, nad którą wyświetla się plakietka. W tym przypadku jest to ikona poczty.

Wygląda to tak:

Prosta plakietka, która nie zawiera treści.
Rysunek 2. Minimalne wdrożenie plakietki.

Szczegółowy przykład

Z tego fragmentu kodu dowiesz się, jak wyświetlać na plakietce wartości w odpowiedzi na działania użytkownika.

@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 na zakupy z plakietką, która wyświetla liczbę produktów w koszyku użytkownika.

  • BadgedBox wyświetla się tylko wtedy, gdy liczba elementów przekracza 0.
  • Argumenty containerColor i contentColor określają wygląd plakietki.
  • Na plakietce pojawia się funkcja Text kompozycyjna dla boksu treści Badge. W takim przypadku wyświetla się liczba produktów w koszyku.

Implementacja wygląda tak:

Wdrożenie plakietki, które zawiera liczbę produktów w koszyku.
Rysunek 3. Plakietka, która pokazuje liczbę produktów w koszyku.

Dodatkowe materiały