Chips

Komponent Chip to kompaktowy, interaktywny element interfejsu. Reprezentują one złożone elementy, takie jak kontakty lub tagi, często z ikoną i etykietą. Może być zaznaczany, usuwany lub klikalny.

Oto 4 typy elementów i miejsca, w których można 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.
  • Filtrowanie: umożliwia użytkownikom zawężanie treści z wybranych opcji. Można je zaznaczać i odznaczać. Po zaznaczeniu mogą zawierać ikonę znacznika wyboru.
  • Wejście: reprezentuje informacje podawane przez użytkownika, takie jak wybory w menu. Mogą zawierać ikonę i tekst oraz przycisk „X” do usunięcia.
  • Sugestia: wyświetla użytkownikowi rekomendacje na podstawie jego ostatniej aktywności lub danych wejściowych. Zazwyczaj są wyświetlane pod polem do wprowadzania danych, prosząc użytkownika o podanie .
Przykład każdego z 4 komponentów elementu z wyróżnionymi ich unikalnymi cechami.
Rysunek 1. Cztery komponenty układu.

Interfejs API

Istnieją 4 elementy kompozycyjne, które odpowiadają 4 typom elementów. W następnych sekcjach szczegółowo omawiamy te komponenty i ich różnice. Mają jednak wspólne te parametry:

  • label: ciąg znaków widoczny na elemencie.
  • icon: ikona wyświetlana na początku elementu. Niektóre określone funkcje kompozycyjne mają oddzielne atrybuty leadingIcon i trailingIcon .
  • onClick: funkcja Lambda wywoływana przez element, gdy użytkownik go naciśnie.

Element pomocy

Funkcja kompozycyjna AssistChip pozwala w prosty sposób utworzyć który skieruje użytkownika w konkretną stronę. Rozróżnianie to parametr leadingIcon, który umożliwia wyświetlenie ikony po lewej stronie elementu. Ten przykład pokazuje, jak 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

Implementacja wygląda tak.

Prosty element pomocy.
Rysunek 2. Element załącznika.

Ikona filtra

Komponent FilterChip wymaga śledzenia, czy element jest wybrany. Poniższy przykład pokazuje, jak wyświetlić wiodący ikona zaznaczenia 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, implementacja wygląda tak:

Niewybrana ikona filtra bez znacznika i z tłem planu.
Rysunek 3. Odznaczono ikonę filtra.

Po wybraniu wyświetla się tak:

Wybrana ikona filtra z zaznacznikiem i kolorowe tło.
Rysunek 4. Wybrany element filtra.

Element wejściowy

Możesz użyć komponentu InputChip, aby tworzyć elementy, które są wynikiem interakcji z użytkownikiem. Na przykład w kliencie poczty, gdy użytkownik pisze e-maila, element wejściowy może reprezentować osobę, której adres został wpisany w polu „do:”.

Poniższa implementacja pokazuje element wejściowy, który jest już wybrany. Użytkownik odrzuca 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.

Element wejściowy z awatarem i ikoną końcową.
Rysunek 5. Element wprowadzania danych.

Element sugestii

Element kompozycyjny SuggestionChip to najbardziej podstawowy z wymienionych elementów kompozycyjnych. na tej stronie, zarówno w definicji interfejsu API, jak i w typowych przypadkach użycia. Sugestia zawierają dynamicznie generowane wskazówki. Na przykład w aplikacji do czatu AI może wykorzystać elementy z sugestią do przedstawienia możliwych odpowiedzi na najnowsze .

Rozważ implementację 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 wspomagający.
Rysunek 6. Element pomocniczy.

Element podniesiony

Wszystkie przykłady w tym dokumencie korzystają z podstawowych elementów kompozycyjnych, które mają prosty Wygląd. Jeśli chcesz użyć elementu, który ma podwyższoną pozycję, użyj jednego z tych 3 komponentów:

Dodatkowe materiały