Chips

Komponent Chip to kompaktowy, interaktywny element interfejsu. Reprezentuje ona złożone elementy, np. kontakt lub tag, często z ikoną i etykietą. Może być widoczna, zamknięta lub klikalna.

Cztery typy elementów oraz miejsca, w których możesz ich używać, to:

  • Pomoc: pomaga użytkownikowi podczas wykonywania zadania. Często jest to tymczasowy element interfejsu w odpowiedzi na dane wejściowe użytkownika.
  • Filtrowanie: pozwala użytkownikom zawęzić zakres treści przy użyciu zestawu opcji. Można je zaznaczać lub odznaczać. Po ich zaznaczeniu mogą też zawierać ikonę znacznika wyboru.
  • Dane wejściowe: reprezentuje informacje podane przez użytkownika, np. wybrane w menu. Mogą zawierać ikonę i tekst. Mogą też zawierać znak „X” oznaczający usunięcie.
  • Sugestia: wyświetla rekomendacje na podstawie jego ostatniej aktywności lub danych wejściowych. Zwykle pojawiają się pod polem do wprowadzania danych, aby zachęcać użytkowników do działania.
Przykład każdego z 4 komponentów elementu układowego z wyróżnionymi jego unikalnymi cechami.
Rysunek 1. Cztery komponenty układu scalonego.

Interfejs API

Istnieją 4 elementy kompozycyjne odpowiadające 4 rodzajom elementów kompozycyjnych. W kolejnych sekcjach szczegółowo opisujemy funkcje kompozycyjne i ich różnice. Mają jednak te parametry:

  • label: ciąg znaków widoczny w elemencie.
  • icon: ikona wyświetlana na początku elementu. Niektóre elementy kompozycyjne mają osobne parametry leadingIcon i trailingIcon.
  • onClick: lambda wywoływana przez element, gdy użytkownik go kliknie.

Element wspomagający

Funkcja kompozycyjna AssistChip to prosty sposób na utworzenie elementu wspomagającego, który przesuwa użytkownika w określonym kierunku. Jedną z wyróżniających się cech jest parametr leadingIcon, który umożliwia wyświetlenie ikony po lewej stronie elementu. Poniższy przykład ilustruje, jak można ją zaimplementować:

@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 sprawdzania, czy dany element został wybrany. Ten przykład pokazuje, jak wyświetlić ikonę zaznaczonego początku 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

Jeśli nie wybierzesz tej implementacji, ta implementacja będzie wyglądać tak:

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

Po wybraniu ta opcja wyświetla się w następujący sposób:

Wybrany element filtra z czekiem i kolorowym tłem.
Rysunek 4. Wybrana ikona 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 przedstawia element do wprowadzania danych, który jest już w wybranym stanie. 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

Implementacja wygląda tak:

Element wprowadzania z awatarem i ikoną na końcu.
Rysunek 5. Element wejściowy.

Element sugestii

Funkcja kompozycyjna SuggestionChip to najbardziej podstawowy element kompozycyjny wymienionych na tej stronie. Zarówno pod względem definicji interfejsu API, jak i typowych przypadków użycia. Elementy sugestii wyświetlają dynamicznie generowane podpowiedzi. Na przykład w aplikacji do obsługi czatu AI możesz użyć elementów sugestii, aby zaprezentować możliwe odpowiedzi na najnowszą wiadomość.

Zastanów się nad zastosowaniem 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 podwyższony

Wszystkie przykłady w tym dokumencie korzystają z podstawowych funkcji kompozycyjnych, które są płaskie. Jeśli potrzebujesz elementu z podwyższonym wyglądem, użyj jednego z 3 tych funkcji kompozycyjnych:

Dodatkowe materiały