Chip

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

Die vier Arten von Chips und ihre möglichen Anwendungsfälle sind wie folgt:

  • Assist: Führt den Nutzer durch eine Aufgabe. Wird oft als temporäres UI-Element als Reaktion auf eine Nutzereingabe angezeigt.
  • Filter: Ermöglicht Nutzern, Inhalte anhand einer Reihe von Optionen zu filtern. Sie können ausgewählt oder abgewählt werden und enthalten bei Auswahl möglicherweise ein Häkchen.
  • Input: Stellt von Nutzern bereitgestellte Informationen dar, z. B. Auswahlen in einem Menü. Sie können ein Symbol und Text enthalten und ein X zum Entfernen bieten.
  • Suggestion: Bietet Nutzern Empfehlungen basierend auf ihren letzten Aktivitäten oder Eingaben. Werden in der Regel unter einem Eingabefeld angezeigt, um Nutzeraktionen zu fördern.
Ein Beispiel für jede der vier Chipkomponenten mit ihren einzigartigen Merkmalen.
Abbildung 1. Die vier Chip-Komponenten.

API-Oberfläche

Es gibt vier zusammensetzbare Elemente, die den vier Arten von Chips entsprechen. In den folgenden Abschnitten werden diese zusammensetzbaren Elemente 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 zusammensetzbaren Elemente haben separate Parameter leadingIcon und trailingIcon.
  • onClick: Die Lambda-Funktion, die vom Chip aufgerufen wird, wenn der Nutzer darauf drückt.

Assist-Chip

Das zusammensetzbare Element AssistChip ermöglicht die einfache Erstellung eines Assist-Chips, 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 ihn 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)
            )
        }
    )
}
Chip.kt

Diese Implementierung sieht so aus:

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

Filter-Chip

Für das FilterChip zusammensetzbare Element müssen Sie nachverfolgen, ob der Chip ausgewählt ist oder nicht. Das folgende Beispiel zeigt, wie Sie ein Häkchen nur dann anzeigen können, 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
        },
    )
}
Chip.kt

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. Nicht ausgewähltes Infofeld für Filter.

Und so sieht sie aus, wenn sie ausgewählt ist:

Ausgewählter Filter-Chip mit Häkchen und farbigem Hintergrund.
Abbildung 4 Ausgewählter Filter-Chip.

Eingabe-Chip

Mit dem InputChip zusammensetzbaren Element können Sie Chips erstellen, die aus Nutzerinteraktion resultieren. Wenn der Nutzer beispielsweise in einem E-Mail-Client eine E-Mail schreibt, kann ein Eingabe-Chip einen Kontakt darstellen, den der Nutzer dem Feld „An“ hinzugefügt hat.

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

@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

Diese Implementierung sieht so aus:

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

Vorschlags-Chip

Das SuggestionChip zusammensetzbare Element ist das einfachste der auf dieser Seite aufgeführten zusammensetzbaren Elemente, sowohl in seiner API-Definition als auch in seinen gängigen Anwendungsfällen. Vorschlags-Chips präsentieren 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.

Sehen Sie sich diese Implementierung von SuggestionChip an:

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

Diese Implementierung sieht so aus:

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

Erhöhter Chip

In allen Beispielen in diesem Dokument werden die zusammensetzbaren Basiselemente verwendet, die ein flaches Erscheinungsbild haben. Wenn Sie einen Chip mit erhöhtem Erscheinungsbild wünschen, verwenden Sie eines der folgenden drei zusammensetzbaren Elemente:

Zusätzliche Ressourcen