Значки

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

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

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

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

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

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

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

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

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

@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. Значок, отображающий количество товаров в корзине.

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

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