Chip

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Sie repräsentiert komplexe Elemente wie Kontakte oder Tags, oft mit Symbol und Beschriftung. Sie kann anklickbar, abwählbar oder ausblendbar sein.

Die vier Arten von Chips und ihre Verwendungsmöglichkeiten:

  • Unterstützen: Der Nutzer wird bei einer Aufgabe unterstützt. Wird häufig als temporäre UI angezeigt -Element als Reaktion auf Nutzereingabe.
  • Filter: Damit können Nutzer die Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder nicht ausgewählt ist und möglicherweise ein Häkchensymbol enthält.
  • 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 Composeables, die den vier Chiptypen entsprechen. Die 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 Bestimmte zusammensetzbare Funktionen haben eine separate leadingIcon und trailingIcon .
  • onClick: Lambda, das der Chip aufruft, wenn der Nutzer sie drückt.

Assistent-Chip

Mit der zusammensetzbaren Funktion AssistChip lässt sich ganz einfach ein Unterstützungs-Chip, der den Nutzer in eine bestimmte Richtung drängt. 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 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 Chip für Unterstützung.
Abbildung 2: Assistent-Chip

Infofeld für Filter

Für die zusammensetzbare Funktion FilterChip müssen Sie festlegen, 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 Infofeld für einen nicht ausgewählten Filter ohne Prüfung und 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 die Nutzenden beispielsweise in einem E-Mail-Client eine E-Mail-Adresse kann ein Eingabe-Chip für eine Person stehen, deren Adresse der Nutzer eingegeben hat in „to:“ ein.

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 abschließenden Symbol.
Abbildung 5. Eingabe-Chip

Vorschlags-Chip

Das SuggestionChip-Komposit ist das grundlegendste der auf dieser Seite aufgeführten Komposite, sowohl in Bezug auf die API-Definition als auch auf die gängigen Anwendungsfälle. Vorschlag 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 anzuzeigen.

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 Chip für Unterstützung.
Abbildung 6: Assistent-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 einem erhöhten Erscheinungsbild wünschen, verwenden Sie eines der drei folgenden Composeables:

Weitere Informationen