Chips

Komponent Chip to kompaktowy, interaktywny element interfejsu. Reprezentuje złożone elementy, takie jak kontakt lub tag, często z ikoną i etykietą. Może być zaznaczany, zamykany lub klikany.

Oto 4 rodzaje tego elementu i miejsca, w których możesz ich używać:

  • Pomoc: prowadzi użytkownika podczas wykonywania zadania. Często pojawia się jako tymczasowy element interfejsu w odpowiedzi na dane wejściowe użytkownika.
  • Filtr: umożliwia użytkownikom zawężanie treści za pomocą zestawu opcji. Można je zaznaczać i odznaczać. Po zaznaczeniu może pojawić się ikona znacznika wyboru.
  • Wprowadzanie danych: reprezentuje informacje przekazywane przez użytkownika, np. wybory w menu. Może zawierać ikonę i tekst oraz przycisk X do usuwania.
  • Sugestia: wyświetla użytkownikowi rekomendacje na podstawie jego ostatniej aktywności lub wprowadzonych danych. Zwykle pojawiają się pod polem do wprowadzania, aby zachęcić użytkownika do działania.
Przykłady 4 komponentów chip z wyróżnionymi unikalnymi cechami.
Rysunek 1. 4 komponenty chip.

Powierzchnia interfejsu API

Istnieją 4 funkcje kompozycyjne odpowiadające 4 rodzajom elementów chip. W kolejnych sekcjach znajdziesz szczegółowe informacje o tych funkcjach kompozycyjnych i różnicach między nimi. Funkcje mają te same parametry:

  • label: ciąg znaków, który pojawia się na elemencie chip.
  • icon: ikona wyświetlana na początku elementu. Niektóre z tych funkcji kompozycyjnych mają oddzielne parametry leadingIcon i trailingIcon.
  • onClick: funkcja lambda, którą wywołuje komponent, gdy użytkownik go naciśnie.

Element pomocy

Funkcja kompozycyjna AssistChip zapewnia prosty sposób tworzenia elementu pomocy, który zachęca użytkownika do podjęcia określonego działania. Jedną z cech wyróżniających jest parametr leadingIcon, który umożliwia wyświetlanie ikony po lewej stronie elementu. Poniższy przykład pokazuje, jak możesz to zrobić:

@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

Ta implementacja wygląda tak:

Prosty chip pomocy z ikoną i etykietą tekstową.
Rysunek 2. Element pomocy
.

Element chip z filtrem

Funkcja kompozycyjna FilterChip wymaga śledzenia, czy element jest wybrany. Poniższy przykład pokazuje, jak wyświetlać ikonę z zaznaczeniem tylko wtedy, gdy użytkownik wybierze element:

@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

Gdy ta implementacja nie jest zaznaczona, wygląda tak:

Niewybrana ikona filtra bez zaznaczenia i z jednolitym tłem.
Rysunek 3. Odznaczono ikonę filtra.

Po wybraniu wygląda tak:

Wybrana ikona filtra z zaznaczeniem i kolorowym tłem.
Rysunek 4. Wybrany element filtra.

Element wprowadzania danych

Za pomocą funkcji InputChip możesz tworzyć elementy chip, które są wynikiem interakcji użytkownika. Na przykład w programie poczty e-mail podczas pisania wiadomości przez użytkownika element wprowadzania danych może reprezentować kontakt dodany przez użytkownika do pola „Do:”.

Poniższa implementacja przedstawia element wejściowy, który jest już w stanie wybranym. Użytkownik zamyka element, gdy go naciśnie.

@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

Ta implementacja wygląda tak:

Chip wprowadzania danych z awatarem i ikoną na końcu.
Rysunek 5. Element wprowadzania danych.

Element z sugestią

Funkcja kompozycyjna SuggestionChip jest najbardziej podstawową z funkcji kompozycyjnych wymienionych na tej stronie, zarówno pod względem definicji interfejsu API, jak i częstych przypadków użycia. Chip z sugestią zawiera dynamicznie generowane wskazówki. Na przykład w aplikacji do czatowania z AI możesz używać sugestii, aby wyświetlać możliwe odpowiedzi na ostatnią wiadomość.

Przyjrzyj się tej implementacji funkcji SuggestionChip:

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

Ta implementacja wygląda tak:

Prosty element z sugestią.
Rysunek 6. Element z sugestią.

Element podniesiony

Wszystkie przykłady w tym dokumencie korzystają z podstawowych funkcji kompozycyjnych, które mają płaski wygląd. Jeśli chcesz, aby element miał podniesiony wygląd, użyj jednej z tych 3 funkcji kompozycyjnych:

Dodatkowe materiały