Чип

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

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

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

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

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

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

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

AssistChip composable обеспечивает простой способ создания вспомогательного чипа, который подталкивает пользователя в определенном направлении. Одной из отличительных особенностей является его параметр 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 composable для создания чипов, которые являются результатом взаимодействия с пользователем. Например, в почтовом клиенте, когда пользователь пишет электронное письмо, чип ввода может представлять человека, адрес которого пользователь ввел в поле «кому:».

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

@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, так и в общих случаях использования. Чипы предложений представляют собой динамически сгенерированные подсказки. Например, в приложении чата AI вы можете использовать чипы предложений для представления возможных ответов на последнее сообщение.

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

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

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

Простая фишка-предложение.
Рисунок 6. Фишка предложения.

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

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

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