Значки

Используйте значок, чтобы показывать небольшой визуальный элемент, обозначающий статус или числовое значение, на другом составном элементе. Вот несколько распространенных ситуаций, в которых можно использовать значок:

• Уведомления. Показывает количество непрочитанных уведомлений на значке приложения или колокольчике уведомлений.
• Сообщения. Указывает на новые или непрочитанные сообщения в приложении для чата.
• Статус. Показывает статус задачи, например "Выполнено", "В процессе" или "Не удалось".
• Количество товаров в корзине. Показывает, сколько товаров находится в корзине пользователя.
• Новый контент. Рассказывайте пользователям о новом контенте или функциях.

Поверхность API

Используйте composable-функцию BadgedBox, чтобы добавить значки в приложение. По сути, это контейнер. Вы можете управлять внешним видом значка с помощью двух основных параметров:

• content – контент, который можно комбинировать и который содержится в объекте BadgedBox. Обычно Icon.
• badge – composable-функция, которая отображается как значок поверх контента. Обычно это специальная composable-функция Badge.

Простой пример

Ниже приведен фрагмент кода с базовой реализацией BadgedBox:

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

В этом примере значок перекрывает компонент Icon. Обратите внимание на следующее в коде:

• BadgedBox – это общий контейнер.
• Аргумент для параметра badge функции BadgedBox – Badge. Поскольку у функции Badge нет собственных аргументов, приложение показывает значок по умолчанию – небольшой красный круг.
• Icon используется в качестве аргумента для параметра content функции BadgedBox. Значок, над которым появляется значок. В данном случае это значок почты.

Вот как это выглядит:

Подробный пример

В приведенном ниже фрагменте кода показано, как отображать в значке значения, которые меняются в зависимости от действий пользователя.

@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

В этом примере реализован значок корзины для покупок с бейджем, на котором показывается количество товаров в корзине пользователя.

• Значок BadgedBox показывается, только если количество товаров больше нуля.
• Аргументы для containerColor и contentColor определяют внешний вид значка.
• Компонуемый элемент Text для контента Badge появляется в значке. В этом случае показывается количество товаров в корзине.

Вот как это будет выглядеть:

Дополнительные ресурсы

• Material 3: значки
• BadgedBox
• Badge