Чип

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

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

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

Рисунок 1. Четыре компонента чипа.

поверхность 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

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

Рисунок 2. Вспомогательный чип.

Чип фильтра

Компоновка 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

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

Рисунок 3. Невыбранный чип фильтра.

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

Рисунок 4. Выбранный чип фильтра.

Входной чип

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

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

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

@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

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

Рисунок 5. Входной чип.

Фишка предложения

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

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

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

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

Рисунок 6. Вспомогательный чип.

Примечание. Хотя компонент чипа предложения предназначен для информационных целей, он по-прежнему использует лямбда-выражение onClick , которое можно использовать для создания интерактивности.

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

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

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

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