Значки

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

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

Рисунок 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 { 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