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 →

Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist ein Button eine interaktive Komponente, die für die Eingabe über eine Display-Brille optimiert ist. Sie bietet klares visuelles Feedback über ihre Status, um Nutzeraktionen zu steuern.

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

Die Standardschaltfläche enthält ein Textlabel und optionale Symbole. Sie können sie für primäre oder sekundäre Aktionen verwenden. Es gibt auch spezielle Schaltflächen wie Symbolschaltflächen und Umschaltschaltflächen, die in Jetpack Compose Glimmer als separate Komponenten definiert sind.

Standard

Groß

Anatomie

Eine Schaltfläche besteht aus einem Container und einem Label, mit optionalen vor- und nachgestellten Symbolen.

Größen

Jetpack Compose-Glimmer-Schaltflächen unterstützen zwei Größenvarianten. Diese wirken sich auf die Mindesthöhe und das interne Padding aus.

Bundesstaaten

Schaltflächen in Jetpack Compose Glimmer ändern ihr Aussehen, um ihren Status zu kommunizieren.

• Aktiviert: Der Standardstatus für einen interaktiven Button.
• Fokussiert: Wenn der Button fokussiert ist, wird ein GlimmerTheme.depthEffectLevels.level1 und ein fokussierter Rahmen angewendet.
• Gedrückt: Wenn diese Option aktiviert ist, wird ein halbtransparentes weißes Overlay auf die Oberfläche angewendet.
• Deaktiviert: Die Schaltfläche reagiert nicht auf Eingaben und ihr Erscheinungsbild wird angepasst.

Standardeinstellungen für Buttons

Für Standardschaltflächen gelten die folgenden Standardeinstellungen:

• Standardmäßig wird für Schaltflächen GlimmerTheme.typography.bodySmall verwendet. Achten Sie darauf, dass der Text in den Schaltflächen prägnant ist und die Aktion klar beschreibt.
• Die Standardform für eine Schaltfläche ist GlimmerTheme.shapes.large. Diese einheitliche Abrundung hilft Nutzern, Buttons auf der Benutzeroberfläche der Display-Brille zu erkennen.

Beispiel: Schaltfläche mit Text und Symbolen

Ein einfacher Button enthält nur ein Textlabel. Sie können aber auch Symbole am Anfang (mit leadingIcon) oder am Ende (mit trailingIcon) des Textes hinzufügen, um zusätzlichen Kontext zu bieten.

Mit dem folgenden Code wird ein Button mit einem vorangestellten und einem nachgestellten Symbol erstellt:

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

Schaltflächengruppen

Mit dem Compose-Element ButtonGroup kannst du Schaltflächen in einer scrollbaren Zeile gruppieren, die als Fokus-Controller fungiert. Wenn der Nutzer scrollt, wird der Fokus automatisch verschoben, um die Schaltfläche hervorzuheben, die der aktuellen Scrollposition entspricht.

Beispiel: Schaltflächengruppen

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") }
}
ButtonSamples.kt

Fokussteuerung in Schaltflächengruppen

Sie können den Fokus auf eine beliebige Schaltfläche in einer Gruppe verschieben, um die Auswahl manuell zu steuern.

Mit dem Status ButtonGroup kannst du das Scrollverhalten anpassen und steuern:

1. Deklarieren Sie den Status mit rememberButtonGroupState.
2. Übergeben Sie sie 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 beim Klicken von einem Button auf einen anderen 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")
    }
}
ButtonSamples.kt

Fokusfarbe für Markenauftritt anpassen

In Jetpack Compose Glimmer sind die Komponenten für transparente Displays konzipiert und optimiert. Sie basieren daher hauptsächlich auf dezenten, lichtdurchlässigen Oberflächen und kontrastreichen Rahmen, um die Lesbarkeit und den visuellen Komfort vor dem Hintergrund der realen Welt zu gewährleisten. Da im Ruhezustand neutrale Töne bevorzugt werden, um visuelle Ermüdung und eine Beeinträchtigung des Sichtfelds des Nutzers zu vermeiden, bietet der Parameter focusedColor für Button die primäre Möglichkeit, die Marke Ihrer App zu präsentieren.

Durch diese Möglichkeit wird der Akzent Ihrer Marke zu einem dynamischen Teil des aktiven Interaktionsstatus des Systems, anstatt inaktive Schaltflächen mit gesättigten Farben zu tönen, was die Transparenz und den Kontrast in optischen Durchsichtsumgebungen beeinträchtigen könnte. Wenn der Button fokussiert ist, wird der Hintergrund in diesem Markenfarbton dargestellt. Außerdem wird der Kontrast des Inhalts automatisch mit calculateContentColor(focusedColor) neu berechnet. So wird ein klares, interaktives Feedback erzielt, während die Zurückhaltung und optische Ergonomie, die für Display-Brillen erforderlich sind, erhalten bleiben.

Im folgenden Beispiel wird gezeigt, wie Sie die Standardfarbe focusedColor durch die Farbe Ihrer Marke ersetzen:

Button(
    onClick = {},
    focusedColor = brandColor,
) {
    Text("Focus Color Button")
}
ButtonSamples.kt