Чип

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

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

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

API surface

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

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

Чип помощника

Composable-функция AssistChip позволяет легко создать вспомогательный чип, который направляет пользователя в определенном направлении. Отличительной особенностью является параметр leadingIcon, который позволяет отображать значок слева от чипа. Ниже приведен пример реализации.

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

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

Простой вспомогательный чип с начальным значком и текстовым ярлыком.
Рисунок 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(
                    painter = rememberVectorPainter(AppIcons.Done),
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

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

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

и так, когда выбран:

Выбранный фильтр-чип с флажком и цветным фоном.
Рисунок 4. Выбранный фильтр.

Чип ввода

Вы можете использовать composable-функцию 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(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

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

Чип ввода с аватаром и конечным значком.
Рисунок 5. чип ввода.

Вариант запроса

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

Рассмотрим пример реализации SuggestionChip:

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

Вот как это выглядит:

Простой вариант запроса.
Рисунок 6. вариант запроса.

Приподнятый чип

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

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