Значки

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

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

Рисунок 1. Примеры значков

API surface

Чтобы добавить значки в приложение, используйте 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. Это значок, на котором появляется значок уведомления. В данном случае это значок почты.

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

Рисунок 2. Минимальная реализация значка.

Важно! В слот контента composable-функции BadgedBox можно передать любую composable-функцию. Таким образом, вы можете создать значок, который будет отображаться на Button, Image или любой другой composable-функции.

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

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

@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 отображается, только если количество товаров больше 0.
• Аргументы containerColor и contentColor определяют внешний вид значка.
• Composable-функция Text для слота контента Badge появляется внутри значка. В данном случае это количество товаров в корзине.

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

Рисунок 3. Значок, показывающий количество товаров в корзине.

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

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