Chip

Die Komponente Chip ist ein kompaktes, interaktives UI-Element. Sie stellen komplexe Entitäten wie einen Kontakt oder ein Tag dar, oft mit einem Symbol und einem Label. Sie können anklickbar, schließbar oder anklickbar sein.

Die vier Arten von Chips und ihre Verwendungsmöglichkeiten sind:

  • Unterstützen: Führt den Nutzer durch eine Aufgabe. Wird oft als temporäres UI-Element als Reaktion auf Nutzereingaben angezeigt.
  • Filter: Nutzer können Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder die Auswahl aufgehoben werden. Wenn sie ausgewählt sind, wird möglicherweise ein Häkchensymbol angezeigt.
  • Eingabe: Steht für von Nutzern bereitgestellte Informationen, z. B. Auswahlmöglichkeiten in einem Menü. Sie können ein Symbol und Text enthalten und bieten ein X zum Entfernen.
  • Vorschlag: Bietet dem Nutzer Empfehlungen basierend auf seinen letzten Aktivitäten oder Eingaben. Wird normalerweise unter einem Eingabefeld angezeigt, um Nutzeraktionen anzufordern.
Ein Beispiel für jede der vier Chip-Komponenten, wobei die jeweiligen Merkmale hervorgehoben sind.
Abbildung 1. Die vier Chip-Komponenten.

API-Oberfläche

Es gibt vier Composables, die den vier Arten von Chips entsprechen. In den folgenden Abschnitten werden diese Composables und ihre Unterschiede im Detail beschrieben. Sie haben jedoch die folgenden Parameter gemeinsam:

  • label: Der String, der auf dem Chip angezeigt wird.
  • icon: Das Symbol, das am Anfang des Chips angezeigt wird. Einige der spezifischen Composables haben separate leadingIcon- und trailingIcon-Parameter.
  • onClick: Die Lambda-Funktion, die der Chip aufruft, wenn der Nutzer darauf drückt.

Assist-Chip

Die komponierbare Funktion AssistChip bietet eine einfache Möglichkeit, einen Assistenz-Chip zu erstellen, der den Nutzer in eine bestimmte Richtung lenkt. Ein Unterscheidungsmerkmal ist der Parameter leadingIcon, mit dem Sie ein Symbol auf der linken Seite des Chips anzeigen können. Das folgende Beispiel zeigt, wie Sie sie implementieren können:

@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)
            )
        }
    )
}

Diese Implementierung sieht so aus:

Ein einfacher Assistenz-Chip mit einem führenden Symbol und einer Textbeschriftung.
Abbildung 2. Assist-Chip.

Infofeld für Filter

Für die FilterChip-komponierbare Funktion müssen Sie erfassen, ob der Chip ausgewählt ist oder nicht. Im folgenden Beispiel wird gezeigt, wie Sie ein vorangestelltes Häkchensymbol nur dann anzeigen, wenn der Nutzer den Chip ausgewählt hat:

@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
        },
    )
}

Diese Implementierung sieht so aus, wenn sie nicht ausgewählt ist:

Ein nicht ausgewähltes Infofeld für Filter ohne Häkchen und mit einfachem Hintergrund.
Abbildung 3: Auswahl des Infofelds für Filter aufgehoben.

Wenn sie ausgewählt ist, sieht sie so aus:

Ausgewähltes Infofeld für Filter mit einem Häkchen und einem farbigen Hintergrund.
Abbildung 4. Ausgewählter Filterchip.

Eingabe-Chip

Mit der komponierbaren Funktion InputChip können Sie Chips erstellen, die aus Nutzerinteraktionen resultieren. In einem E-Mail-Client kann ein Eingabe-Chip beispielsweise einen Kontakt darstellen, den der Nutzer dem Feld „An:“ hinzugefügt hat, während er eine E-Mail schreibt.

Die folgende Implementierung zeigt einen Eingabe-Chip, der bereits ausgewählt ist. Der Nutzer schließt den Chip, wenn er darauf tippt.

@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)
            )
        },
    )
}

Diese Implementierung sieht so aus:

Ein Eingabe-Chip mit einem Avatar und einem nachgestellten Symbol.
Abbildung 5. Eingabe-Chip.

Vorschlags-Chip

Die kombinierbare Funktion SuggestionChip ist die einfachste der auf dieser Seite aufgeführten kombinierbaren Funktionen, sowohl in Bezug auf die API-Definition als auch auf die gängigen Anwendungsfälle. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App können Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die letzte Nachricht zu präsentieren.

Betrachten Sie diese Implementierung von SuggestionChip:

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

Diese Implementierung sieht so aus:

Ein einfacher Vorschlags-Chip.
Abbildung 6: Vorschlags-Chip.

Erhöhter Chip

In allen Beispielen in diesem Dokument werden die Basis-Kompositionen verwendet, die ein flaches Erscheinungsbild haben. Wenn Sie einen Chip mit hervorgehobenem Erscheinungsbild verwenden möchten, verwenden Sie eine der folgenden drei Composables:

Zusätzliche Ressourcen