Schaltflächen in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen
Displaybrillen
Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer ist ein Button eine interaktive Komponente, die für die Eingabe über Displaybrillen optimiert ist. Sie bietet durch ihre Status eine klare visuelle Rückmeldung, um Nutzeraktionen zu unterstützen.

Buttons basieren auf dem Jetpack Compose Glimmer Oberflächensystem, das physische Eigenschaften wie Rahmen und Tiefe automatisch verarbeitet.

Der Standardbutton enthält ein Textlabel und optionale Icons. Sie können ihn für primäre oder sekundäre Aktionen verwenden. Es gibt auch spezielle Buttons wie Icon Buttons und Umschalt-Buttons, die in Jetpack Compose Glimmer als separate Komponenten definiert sind.

Standard

Ein Beispiel für verschiedene Buttonstile in Jetpack Compose Glimmer. Diese Beispiele zeigen mittelgroße Standardbuttons mit drei Buttonstatus: „Aktiviert“ (1), „Fokus“ (2) und „Gedrückt“ (3).

Groß

Ein Beispiel für verschiedene Buttonstile in Jetpack Compose Glimmer. Diese Beispiele zeigen große Buttons mit drei Buttonstatus: „Aktiviert“ (1), „Fokus“ (2) und „Gedrückt“ (3).

Anatomie

Ein Button besteht aus einem Container und einem Label mit optionalen Icons am Anfang und Ende.

Teil Beschreibung

Container

Die Hintergrundoberfläche des Buttons.

Label

Der Text, der die Aktion beschreibt.

Icon (optional)

Visuelle Indikatoren am Anfang oder Ende.

Größen

Jetpack Compose Glimmer-Buttons unterstützen zwei Größenvarianten. Diese wirken sich auf die Mindesthöhe und die innere Auffüllung aus.

Größe Mindesthöhe Standardnutzung

Medium

48.dp

Standardaktionen und ‑listen (Standard).

Groß

72.dp

Aktionen mit hoher Gewichtung oder primäre Einstiegspunkte für den Bildschirm.

Status

Buttons in Jetpack Compose Glimmer ändern ihr Erscheinungsbild, um ihren Status zu kommunizieren.

  • Aktiviert: Der Standardstatus für einen interaktiven Button.
  • Fokus: Wenn der Fokus auf dem Button liegt, wird GlimmerTheme.depthEffectLevels.level1 und eine hervorgehobene Umrandung angewendet.
  • Gedrückt: Wenn der Button aktiviert wird, wird eine halbtransparente weiße Überlagerung auf die Oberfläche angewendet.
  • Deaktiviert: Der Button reagiert nicht auf Eingaben und sein Erscheinungsbild wird angepasst.

Button-Standardeinstellungen

Die folgenden Standardeinstellungen gelten für Standardbuttons:

  • Standardmäßig verwenden Buttons GlimmerTheme.typography.bodySmall. Der Text in Buttons sollte kurz sein und die Aktion klar beschreiben.
  • Die Standardform für einen Button ist GlimmerTheme.shapes.large. Diese einheitliche Rundung hilft Nutzern, Buttons auf der gesamten Displaybrillenoberfläche zu erkennen.

Beispiel: Button mit Text

Mit dem folgenden Code wird ein Standardbutton mit Text erstellt:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Beispiel: Buttons mit Icons am Anfang und Ende

Sie können auch Icons am Anfang (mit leadingIcon) oder Ende (mit trailingIcon) des Texts hinzufügen, um zusätzlichen Kontext zu liefern.

Mit dem folgenden Code wird ein Button mit einem Icon am Anfang erstellt:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}