Chip

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Sie stellt komplexe Entitäten wie Kontakte oder Tags dar, oft mit einem Symbol und einem Label. Sie kann anklickbar, abwählbar oder ausblendbar sein.

Es gibt vier Arten von Chips und wo Sie sie verwenden können:

  • Assistent: Hiermit wird der Nutzer durch eine Aufgabe geführt. Erscheint oft als temporäres UI-Element als Reaktion auf Nutzereingaben.
  • Filter: Damit können Nutzer Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder deaktiviert werden. Wenn sie ausgewählt sind, enthalten sie möglicherweise ein Häkchen.
  • Eingabe: 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.
  • Vorschlag: Bietet Nutzern Empfehlungen basierend auf ihren letzten Aktivitäten oder Eingaben. Sie werden in der Regel unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen anzuregen.
Ein Beispiel für jede der vier Chipkomponenten, wobei ihre einzigartigen Eigenschaften hervorgehoben werden.
Abbildung 1 Die vier Chipkomponenten.

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 gemeinsamen Parameter:

  • label: Der String, der auf dem Chip angezeigt wird.
  • icon: Das Symbol, das am Anfang des Chips angezeigt wird. Einige der speziellen Composeables haben einen separaten leadingIcon- und trailingIcon-Parameter.
  • onClick: Lambda, das der Chip aufruft, wenn der Nutzer sie drückt.

Assistent-Chip

Mit dem AssistChip-Komposit können Sie ganz einfach einen Assistenz-Chip erstellen, der 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 dies 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 Chip zur Unterstützung.
Abbildung 2: Assistant-Chip

Infofeld für Filter

Für das FilterChip-Kompositelement müssen Sie erfassen, ob der Chip ausgewählt ist. Im folgenden Beispiel wird gezeigt, wie Sie ein Häkchensymbol nur 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 wie folgt aus, wenn sie nicht ausgewählt ist:

Ein nicht ausgewählter Filter-Chip ohne Häkchen und mit einem Planhintergrund.
Abbildung 3: Nicht ausgewählter Filterchip.

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

Ausgewählter Filterchip mit Häkchen und farbigem Hintergrund.
Abbildung 4: Ausgewählter Filterchip

Eingabe-Chip

Mit dem InputChip-Komposit können Sie Chips erstellen, die aus einer Nutzerinteraktion resultieren. Wenn ein Nutzer beispielsweise in einem E-Mail-Client eine E-Mail schreibt, kann ein Eingabechip eine Person darstellen, deren Adresse der Nutzer in das Feld „An:“ eingegeben hat.

Die folgende Implementierung zeigt einen Eingabechip, der sich bereits in einem ausgewählten Zustand befindet. Der Nutzer schließt den Chip, indem 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 nachfolgenden Symbol.
Abbildung 5. Eingabe-Chip.

Vorschlags-Chip

Das SuggestionChip-Komposit ist das grundlegendste der auf dieser Seite aufgeführten Komposite, sowohl in der API-Definition als auch in den gängigen Anwendungsfällen. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App könnten 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 Assistenz-Chip.
Abbildung 6: Assistant-Chip

Erhöhter Chip

In allen Beispielen dieses Dokuments werden die zusammensetzbaren Basisfunktionen verwendet, die ein flaches Aussehen haben. Wenn Sie einen Chip mit einem erhöhten Erscheinungsbild wünschen, verwenden Sie eines der drei folgenden Composeables:

Weitere Informationen