Chip

Die Komponente „Chip“ ist ein kompaktes, interaktives UI-Element. Sie repräsentiert komplexe Elemente wie Kontakte oder Tags, oft mit Symbol und Beschriftung. Es kann sein, prüfbar, schließbar oder anklickbar.

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ä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 vom Nutzer bereitgestellte Informationen dar, z. B. die Auswahl in einem . Sie können ein Symbol und Text sowie ein „X“ enthalten. zu entfernen.
  • Vorschlag: Stellt dem Nutzer Empfehlungen basierend auf seinen letzten Aktivität oder Eingabe. Wird normalerweise unter einem Eingabefeld angezeigt, um den Nutzer aufzufordern Aktionen.
<ph type="x-smartling-placeholder">
</ph> Ein Beispiel für jede der vier Chipkomponenten, wobei ihre einzigartigen Eigenschaften hervorgehoben sind.
Abbildung 1. Die vier Chipkomponenten.

API-Oberfläche

Es gibt vier zusammensetzbare Funktionen, die den vier Arten von Chips entsprechen. Die 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 Bestimmte zusammensetzbare Funktionen haben eine separate leadingIcon und trailingIcon .
  • onClick: Lambda, das der Chip aufruft, wenn der Nutzer sie drückt.

Unterstützungs-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 links ein Symbol angezeigt werden kann. Seite des Chips. 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:

<ph type="x-smartling-placeholder">
</ph> 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. Das folgende Beispiel zeigt, wie Sie eine Häkchensymbol nur dann, 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:

<ph type="x-smartling-placeholder">
</ph> Ein Infofeld für einen nicht ausgewählten Filter ohne Prüfung und Planhintergrund.
Abbildung 3: Infofeld für Filter nicht ausgewählt.

Bei Auswahl wird Folgendes angezeigt:

<ph type="x-smartling-placeholder">
</ph> Infofeld für einen ausgewählten Filter mit Häkchen und farbigem Hintergrund
Abbildung 4: Infofeld für Filter ausgewählt.

Eingabe-Chip

Mit der zusammensetzbaren Funktion InputChip können Sie Chips erstellen, die aus der Nutzerinteraktion. 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 Bundesstaat. 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:

<ph type="x-smartling-placeholder">
</ph> Ein Eingabe-Chip mit einem Avatar und einem abschließenden Symbol.
Abbildung 5: Eingabe-Chip

Vorschlags-Chip

Die zusammensetzbare Funktion SuggestionChip ist die grundlegendste der aufgeführten zusammensetzbaren Funktionen. sowohl in der API-Definition als auch in den häufigen Anwendungsfällen erläutert. Vorschlag Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App kann anhand von Vorschlags-Chips mögliche Antworten auf die zuletzt angezeigt.

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:

<ph type="x-smartling-placeholder">
</ph> Ein einfacher Chip für Unterstützung.
Abbildung 6: Assistent-Chip

Erhöhter Chip

In allen Beispielen in diesem Dokument werden die grundlegenden zusammensetzbaren Funktionen verwendet, die eine flache Linie einnehmen. Erscheinungsbild. Wenn Sie einen Chip mit einem ansprechenden Design möchten, verwenden Sie eine der drei zusammensetzbare Funktionen:

Weitere Informationen