Odznaki

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

• Powiadomienia: wyświetl liczbę nieprzeczytanych powiadomień na ikonie aplikacji lub ikonie dzwonka.
• Wiadomości: wskaż nowe lub nieprzeczytane wiadomości w aplikacji do czatowania.
• Aktualizacje stanu: pokaż stan zadania, np. „ukończono”, „w toku” lub „nie udało się”.
• Liczba produktów w koszyku: wyświetl liczbę produktów w koszyku użytkownika.
• Nowe treści: wyróżnij nowe treści lub funkcje dostępne dla użytkownika.

Powierzchnia interfejsu API

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

• content: komponent, który zawiera BadgedBox. Zwykle Icon.
• badge: komponent, który wyświetla się jako plakietka nad treścią. Zwykle jest to specjalny komponent Badge.

Podstawowy przykład

Ten fragment kodu pokazuje podstawową implementację BadgedBox:

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

Ten przykład wyświetla plakietkę, która nakłada się na podany komponent Icon. Zwróć uwagę na te elementy kodu:

• BadgedBox pełni rolę ogólnego kontenera.
• Argumentem parametru badge komponentu BadgedBox jest Badge. Ponieważ Badge nie ma własnych argumentów, aplikacja wyświetla domyślną plakietkę, czyli małe czerwone kółko.
• Icon pełni rolę argumentu parametru content komponentu BadgedBox. Jest to ikona, nad którą wyświetla się plakietka. W tym przypadku jest to ikona poczty.

Tak to wygląda:

Szczegółowy przykład

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

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(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

Ten przykład implementuje ikonę koszyka na zakupy z plakietką, która wyświetla liczbę produktów w koszyku użytkownika.

• The BadgedBox wyświetla się tylko wtedy, gdy liczba produktów jest większa niż 0.
• Argumenty containerColor i contentColor określają wygląd plakietki.
• Komponent Text w slocie treści Badge wyświetla się w plakietce. W tym przypadku wyświetla liczbę produktów w koszyku.

Ta implementacja wygląda tak:

Dodatkowe materiały

• Material 3 – plakietki
• BadgedBox
• Badge