Die Komponente „Chip
“ 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 überprüfbar,
schließbar oder anklickbar sein.
Es gibt vier Arten von Chips und wo Sie sie verwenden können:
- Assistent: Hiermit wird der Nutzer 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. 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 sowie ein „X“ zum Entfernen enthalten.
- Suggestion: Stellt dem Nutzer Empfehlungen auf der Grundlage seiner letzten Aktivitäten oder Eingaben bereit. Sie werden normalerweise unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen aufzufordern.
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 gemeinsam:
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 einen separatenleadingIcon
- und einen separatentrailingIcon
-Parameter.onClick
: Lambda, das der Chip aufruft, wenn der Nutzer sie drückt.
Unterstützungs-Chip
Die zusammensetzbare Funktion AssistChip
bietet eine einfache Möglichkeit, einen Unterstützungs-Chip zu erstellen, der den Nutzer in eine bestimmte Richtung bewegt. 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) ) } ) }
Diese Implementierung sieht so aus:
Infofeld für Filter
Für die zusammensetzbare Funktion FilterChip
müssen Sie prüfen, ob der Chip ausgewählt ist. Das folgende Beispiel zeigt, wie ein Häkchensymbol nur dann 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 }, ) }
Diese Implementierung sieht wie folgt aus, wenn sie nicht ausgewählt ist:
Bei Auswahl wird Folgendes angezeigt:
Eingabe-Chip
Mit der zusammensetzbaren Funktion InputChip
können Sie Chips erstellen, die aus Nutzerinteraktionen resultieren. Wenn der Nutzer in einem E-Mail-Client beispielsweise eine E-Mail schreibt, kann ein Eingabe-Chip eine Person darstellen, deren E-Mail-Adresse der Nutzer in das Feld „An:“ eingegeben hat.
Die folgende Implementierung zeigt einen Eingabe-Chip, der sich bereits in einem ausgewählten Zustand befindet. 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) ) }, ) }
Diese Implementierung sieht so aus:
Vorschlags-Chip
Die zusammensetzbare Funktion SuggestionChip
ist sowohl in ihrer API-Definition als auch in den häufigsten Anwendungsfällen die grundlegendste der auf dieser Seite aufgeführten zusammensetzbaren Funktionen. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App können Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die neueste Nachricht darzustellen.
Sehen Sie sich diese Implementierung von SuggestionChip
an:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Diese Implementierung sieht so aus:
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 Aussehen möchten, verwenden Sie eine der drei folgenden zusammensetzbaren Funktionen: