Ein-/Aus-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 ToggleButton eine interaktive Komponente deren Aussehen sich je nach ausgewähltem Zustand ändert. Ein-/Aus-Buttons sind für Displaybrillen optimiert und bieten klare visuelle Übergänge in Form und Farbe. Diese Übergänge zeigen an, wenn eine Aktion oder Einstellung aktiv ist.

Verwenden Sie Ein-/Aus-Buttons, um Aktionen zu präsentieren, die ein- oder ausgeschaltet werden können. Im Gegensatz zu Ein-/Aus-Buttons, die nur Symbole enthalten, wird bei einem Ein-/Aus-Button hauptsächlich Textinhalt angezeigt. Er unterstützt jedoch optionale Symbol-Slots für zusätzlichen Kontext.

Für andere Anwendungsfälle gibt es auch Standard- und Symbolschaltflächen.

Anatomie

Ein Ein-/Aus-Button besteht aus einem Container, der zwischen Zuständen wechselt, und einem Label mit optionalen Symbolen.

Größen

Wie Standard-Buttons unterstützen auch Ein-/Aus-Buttons zwei Größenvarianten:

Standardeinstellungen für Ein-/Aus-Buttons

Standardmäßig verwenden Ein-/Aus-Buttons ToggleButtonDefaults.animateShape. Dadurch wird ein reibungsloser Übergang zwischen den folgenden Zuständen erstellt:

• Nicht ausgewählt: GlimmerTheme.shapes.large (normalerweise eine CircleShape).
• Ausgewählt: ToggleButtonDefaults.CheckedShape (eine RoundedCornerShape mit 20.dp-Ecken).

Die Klasse ToggleButtonColors verwaltet die Farbauflösung für die folgenden Zustände:

• Nicht ausgewählt: Standardmäßig GlimmerTheme.colors.surface.
• Ausgewählt: Standardmäßig GlimmerTheme.colors.surface.

Animation

Für die Animation verwenden Ein-/Aus-Buttons die folgenden Standardeinstellungen:

• animateShape: Bietet eine Shape, die Eckengrößen mithilfe einer Spring-Animationsspezifikation (stiffness = 600f) interpoliert.
• colors: Eine Factory-Funktion zum Anpassen der Hintergrund- und Inhaltsfarben für beide Zustände.
• CheckedShape: Eine statische RoundedCornerShape(20.dp), die für den ausgewählten Zustand verwendet wird.
• contentPadding: Wird von ButtonDefaults.contentPadding übernommen.

Beispiel: Ein-/Aus-Button

Mit dem folgenden Code wird ein einfacher Ein-/Aus-Button erstellt:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt

Beispiel: Ein-/Aus-Button mit führendem Symbol

Mit dem folgenden Code wird ein Ein-/Aus-Button mit einem führenden Symbol erstellt:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt