Значки

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

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

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

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

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

Данная реализация выглядит следующим образом:

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

• Материал 3 - Значки
• BadgedBox
• Badge