Чип

Компонент 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

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

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