Значки

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

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

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

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

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

• content : Компонуемое содержимое, которое содержит BadgedBox . Обычно Icon .
• badge : Компонуемый элемент, который отображается как значок поверх контента. Обычно это выделенный компонуемый элемент Badge .

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

В этом фрагменте кода показана базовая реализация BadgedBox :

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

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

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

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

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

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

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

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

@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

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

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

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

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

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

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