Чип

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

Ниже приведены четыре типа чипов и области их возможного использования:

• Помощь : помогает пользователю выполнить задачу. Часто отображается как временный элемент пользовательского интерфейса в ответ на действия пользователя.
• Фильтр : позволяет пользователям выбирать контент из набора вариантов. Фильтры можно выбирать или отменять, а при выборе они могут помечаться галочкой.
• Ввод : представляет собой информацию, предоставленную пользователем, например, пункты меню. Может содержать значок и текст, а также значок X для удаления.
• Предложение : предоставляет пользователю рекомендации на основе его недавних действий или ввода данных. Обычно отображается под полем ввода, подсказывая пользователю, какие действия он должен выполнить.

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

Существует четыре компонуемых объекта, соответствующих четырём типам микросхем. В следующих разделах подробно описаны эти компонуемые объекты и их различия. Однако у них есть следующие общие параметры:

• label : Строка, которая отображается на чипе.
• icon : Значок, отображаемый в начале чипа. Некоторые из компонуемых элементов имеют отдельные параметры leadingIcon и trailingIcon .
• onClick : лямбда-функция, которую вызывает чип, когда пользователь нажимает на нее.

Вспомогательный чип

Компонуемый объект AssistChip предоставляет простой способ создания вспомогательного чипа, который подталкивает пользователя в определённом направлении. Его отличительной особенностью является параметр leadingIcon , позволяющий отображать значок слева от чипа. Следующий пример демонстрирует, как это реализовать:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

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

Фильтр-чип

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

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

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

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

Входной чип

Вы можете использовать компонуемый объект InputChip для создания чипов, которые появляются в результате взаимодействия с пользователем. Например, в почтовом клиенте, когда пользователь пишет электронное письмо, чип ввода может представлять собой контакт, добавленный пользователем в поле «Кому:».

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

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

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

Чип предложений

Составной элемент SuggestionChip — самый базовый из перечисленных на этой странице, как с точки зрения определения API, так и с точки зрения распространённых вариантов использования. Чипы предложений представляют собой динамически генерируемые подсказки. Например, в чат-приложении с искусственным интеллектом вы можете использовать чипы предложений для отображения возможных ответов на последнее сообщение.

Рассмотрим эту реализацию SuggestionChip :

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

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

Повышенный чип

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

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

• Документация по материальному пользовательскому интерфейсу