Chips

Komponent Chip to niewielki, interaktywny element interfejsu. Przedstawia on złożone elementy, np. kontakt lub tag, często z ikoną i etykietą. Można zaznaczyć, zamknąć lub kliknąć.

Oto 4 typy elementów i miejsca, w których można ich używać:

  • Pomoc: prowadzi użytkownika podczas wykonywania zadania. Często wyświetla się jako tymczasowy element interfejsu w odpowiedzi na dane wejściowe użytkownika.
  • Filtrowanie: umożliwia użytkownikom doprecyzowywanie treści z ustalonych opcji. Możesz je zaznaczyć lub odznaczyć. Po ich zaznaczeniu może być widoczna ikona znacznika wyboru.
  • Dane wejściowe: reprezentuje informacje przekazane przez użytkownika, takie jak opcje w menu. Mogą zawierać ikonę i tekst oraz znak „X” oznaczający usunięcie.
  • Sugestia: zawiera rekomendacje na podstawie ostatniej aktywności lub danych wprowadzonych przez użytkownika. Zwykle wyświetlają się pod polem do wprowadzania danych, by zachęcić użytkownika do działania.
Przykład każdego z 4 komponentów elementu z wyróżnionymi ich unikalnymi cechami.
Rysunek 1. Cztery komponenty układu scalonego.

Interfejs API

Istnieją 4 elementy kompozycyjne, które odpowiadają 4 typom elementów. W kolejnych sekcjach znajdziesz szczegółowe omówienie tych funkcji kompozycyjnych i różnic między nimi. Obejmują one jednak te parametry:

  • label: ciąg znaków widoczny na elemencie.
  • icon: ikona wyświetlana na początku elementu. Niektóre z określonych funkcji kompozycyjnych mają oddzielny parametr leadingIcon i trailingIcon.
  • onClick: funkcja lambda wywoływana przez element po naciśnięciu przez użytkownika.

Element pomocniczy

Funkcja kompozycyjna AssistChip to prosty sposób na utworzenie elementu pomocy, który skieruje użytkownika w wybranym kierunku. Cechą wyróżniającą element to parametr leadingIcon, który umożliwia wyświetlenie ikony po lewej stronie elementu. Poniższy przykład pokazuje, jak możesz zastosować ten tag:

@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 wspomagający.
Rysunek 2. Element pomocniczy.

Ikona filtra

Funkcja kompozycyjna FilterChip wymaga sprawdzenia, czy został wybrany element. Ten przykład pokazuje, jak wyświetlać na początku ikonę z zaznaczoną ikoną 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:

Niewybrany element filtra bez sprawdzania i tła planu.
Rysunek 3. Odznaczono ikonę filtra.

Po wybraniu wyświetla się tak:

Wybrany element filtra z kratką i kolorowym tłem.
Rysunek 4. Wybrano ikonę filtra.

Element wejściowy

Za pomocą funkcji kompozycyjnej InputChip możesz tworzyć elementy będące wynikiem interakcji użytkownika. Na przykład w kliencie poczty e-mail, gdy użytkownik pisze e-maila, element do wprowadzania danych może reprezentować osobę, której adres wpisał w polu „Do:”.

Poniższa implementacja prezentuje element wejściowy, który jest już w wybranym stanie. Użytkownik zamyka element po jego naciśnięciu.

@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

Implementacja wygląda tak.

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

Element sugestii

Element kompozycyjny SuggestionChip to najbardziej podstawowy z elementów kompozycyjnych wymienionych na tej stronie, zarówno w definicji interfejsu API, jak i typowych przypadkach użycia. Elementy sugestii prezentują dynamicznie generowane wskazówki. Na przykład w aplikacji do czatu AI możesz użyć elementów z sugestią, aby przedstawić możliwe odpowiedzi na najnowszą wiadomość.

Rozważ takie wdrożenie elementu SuggestionChip:

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

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ą płaski wygląd. Jeśli chcesz, aby element wyglądał bardziej wydajnie, użyj jednego z tych 3 elementów kompozycyjnych:

Dodatkowe materiały