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 Symbole. Sie können ihn für primäre oder sekundäre Aktionen verwenden. Es gibt auch spezielle Buttons wie Symbolbuttons und Umschaltbuttons, 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 Symbolen am Anfang und Ende.

Teil Beschreibung

Container

Die Hintergrundoberfläche des Buttons.

Label

Der Text, der die Aktion beschreibt.

Symbol (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 den inneren Abstand 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 und Symbolen

Ein einfacher Button enthält nur ein Textlabel. Sie können aber auch Symbole 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 Symbol am Anfang und Ende erstellt:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}

Button-Gruppen

Die ButtonGroup zusammensetzbare Funktion können Sie Buttons in einer scrollbaren Zeile gruppieren die als Fokussteuerung dient. Wenn der Nutzer scrollt, wird der Fokus automatisch auf den Button verschoben, der der aktuellen Scrollposition entspricht.

Ein Beispiel für das Scrollen und Fokussieren von Button-Gruppen.

Beispiel: Button-Gruppen

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}

Fokussteuerung in Button-Gruppen

Sie können den Fokus auf einen beliebigen Button in einer Gruppe verschieben, um die Auswahl manuell zu steuern.

So passen Sie das Scrollverhalten mit dem Status ButtonGroup an und steuern es:

  1. Deklarieren Sie den Status mit rememberButtonGroupState.
  2. Übergeben Sie ihn an die zusammensetzbare Funktion ButtonGroup.
  3. Rufen Sie animateScrollToItem (oder scrollToItem für sofortiges Scrollen) auf, um zu einem bestimmten Element zu scrollen und den Fokus automatisch darauf zu verschieben.

Mit dem folgenden Code wird der Fokus nach einem Klick von einem Button zum nächsten verschoben:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}