Chip

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Es stellt komplexe Entitäten wie einen Kontakt oder ein Tag dar, oft mit einem Symbol und Label. Er kann aktiviert, geschlossen oder anklickbar sein.

Die vier Arten von Chips und wo sie verwendet werden können, sind:

  • Assistent: Der Nutzer wird durch eine Aufgabe geführt. Wird häufig als temporäres UI-Element als Reaktion auf Nutzereingaben angezeigt.
  • Filter: Damit können Nutzer die Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder deaktiviert werden und können ein Häkchensymbol enthalten.
  • Eingabe: Stellt vom Nutzer bereitgestellte Informationen wie eine Auswahl in einem Menü dar. Sie können ein Symbol, einen Text sowie ein „X“ enthalten, das entfernt werden kann.
  • Vorschlag: Stellt dem Nutzer Empfehlungen auf der Grundlage seiner letzten Aktivität oder Eingabe bereit. Sie werden normalerweise unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen aufzurufen.
Ein Beispiel für jede der vier Chip-Komponenten mit hervorgehobenen einzigartigen Eigenschaften.
Abbildung 1. Die vier Chip-Komponenten

API-Oberfläche

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

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

Assistent-Chip

Mit der zusammensetzbaren Funktion AssistChip lässt sich ganz einfach ein Assist-Chip erstellen, der den Nutzer in eine bestimmte Richtung bringt. Ein Unterscheidungsmerkmal ist der Parameter leadingIcon, mit dem Sie auf der linken Seite des Chips ein Symbol anzeigen lassen können. Das folgende Beispiel zeigt, wie Sie es 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 Assistenten-Chip.
Abbildung 2: Chip für Unterstützung.

Infofeld für Filter

Bei der zusammensetzbaren Funktion FilterChip müssen Sie prüfen, ob der Chip ausgewählt ist. Das folgende Beispiel zeigt, wie ein vorangestelltes Häkchen nur angezeigt werden kann, 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

Wenn diese Option nicht ausgewählt ist, sieht diese Implementierung so aus:

Ein nicht ausgewählter Infofeld für Filter ohne Prüfung und einen Planhintergrund.
Abbildung 3: Infofeld für Filter nicht ausgewählt.

Wenn diese Option ausgewählt ist, wird sie so angezeigt:

Ausgewähltes Infofeld für Filter mit einem Häkchen und einem farbigen Hintergrund.
Abbildung 4: Infofeld für Filter ausgewählt.

Eingabechip

Mit der zusammensetzbaren Funktion InputChip können Sie Chips erstellen, die aus Nutzerinteraktionen resultieren. Wenn ein Nutzer in einem E-Mail-Client beispielsweise eine E-Mail schreibt, kann ein Eingabechip für eine Person stehen, deren Adresse der Nutzer in das Feld „An:“ eingegeben hat.

Die folgende Implementierung zeigt einen Eingabechip, der sich bereits im ausgewählten Zustand befindet. Der Nutzer schließt den Chip, wenn er ihn 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: Eingabechip.

Vorschlags-Chip

Die zusammensetzbare Funktion SuggestionChip ist die grundlegendste der auf dieser Seite aufgeführten zusammensetzbaren Funktionen, sowohl in der API-Definition als auch in den gängigen Anwendungsfällen. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chatanwendung können Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die neueste Nachricht darzustellen.

Betrachten Sie diese Implementierung von SuggestionChip:

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

Diese Implementierung sieht so aus:

Ein einfacher Assistenten-Chip.
Abbildung 6: Chip für Unterstützung.

Erhöhter Chip

In allen Beispielen in diesem Dokument werden die grundlegenden zusammensetzbaren Funktionen verwendet, die flach aussehen. Wenn Sie einen Chip mit erhöhter Darstellung wünschen, verwenden Sie eine der drei folgenden zusammensetzbaren Funktionen:

Weitere Informationen