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-Schaltflächen sind für Displaybrillen optimiert, um klare visuelle Übergänge in Form und Farbe zu ermöglichen. Diese Übergänge zeigen an, wann eine Aktion oder Einstellung aktiv ist.

Verwenden Sie Ein-/Aus-Schaltflächen, um Aktionen zu präsentieren, die ein- oder ausgeschaltet werden können. Im Gegensatz zu Ein-/Aus-Schaltflächen, die nur Symbole enthalten, wird auf einer Ein-/Aus-Schaltfläche hauptsächlich Text angezeigt. Es können aber auch optionale Symbol-Slots für zusätzlichen Kontext verwendet werden.

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

Anatomie

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

Größen

Wie Standardschaltflächen unterstützen auch Ein-/Aus-Schaltflächen zwei Größenvarianten:

Standardeinstellungen für Ein-/Aus-Schaltflächen

Standardmäßig verwenden Ein-/Aus-Schaltflächen 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 Ein-/Aus-Schaltflächen werden standardmäßig die folgenden Animationen verwendet:

• animateShape: Bietet eine Shape, die Eckengrößen mithilfe einer Federanimationsspezifikation (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-Schaltfläche

Mit dem folgenden Code wird eine einfache Ein-/Aus-Schaltfläche 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-Schaltfläche mit führendem Symbol

Mit dem folgenden Code wird eine Ein-/Aus-Schaltfläche 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