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 →
Displaybrille
Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist ein ToggleButton eine interaktive Komponente, deren Darstellung sich je nach ausgewähltem Zustand ändert. Ein-/Aus-Schalter sind für die Darstellung auf Brillen 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 ermöglichen, die aktiviert oder deaktiviert werden können. Im Gegensatz zu Ein/Aus-Schaltflächen mit Symbolen wird auf einer Ein/Aus-Schaltfläche in erster Linie Text angezeigt. Sie unterstützt jedoch optionale Symbol-Slots für zusätzlichen Kontext.

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

Abbildung 1. Beispiel für eine Ein/Aus-Schaltfläche in Jetpack Compose Glimmer, die für die Wiedergabe- und Pausenvorgänge in einem UI-Layout verwendet wird.

Anatomie

Ein Ein/Aus-Button besteht aus einem Container, der sich zwischen den Status ändert, und einem Label mit optionalen Symbolen.

Teil Beschreibung

Container

Animiert den Übergang zwischen einer kreisförmigen Form (nicht ausgewählt) und einem abgerundeten Rechteck (ausgewählt).

Label

Normalerweise eine zusammensetzbare Funktion vom Typ Text.

Symbole (optional)

Führende oder nachfolgende Slots, die je nach Bundesstaat variieren können.

Größen

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

Größe Mindesthöhe Standardnutzung

Mittel

48.dp

Standardgröße für interaktive Elemente.

Groß

72.dp

Primäre oder stark betonte Ein/Aus-Schaltflächen.

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

Standardmäßig verwenden Ein/Aus-Schaltflächen ToggleButtonDefaults.animateShape. Dadurch wird ein reibungsloser Übergang zwischen den folgenden Status erreicht:

Die Klasse ToggleButtonColors verwaltet die Farbauflösung für die folgenden Status:

Animation

Für Kippschalter werden standardmäßig die folgenden Animationen verwendet:

  • animateShape: Stellt eine Shape bereit, die Eckengrößen mithilfe einer Federanimationsspezifikation (stiffness = 600f) interpoliert.
  • colors: Eine Fabrikmethode zum Anpassen der Hintergrund- und Inhaltsfarben für beide Zustände.
  • CheckedShape: Eine statische RoundedCornerShape(20.dp), die für den angekreuzten Status verwendet wird.
  • contentPadding: Übernimmt von ButtonDefaults.contentPadding.

Beispiel: Ein/Aus-Button

Mit dem folgenden Code wird ein einfacher Ein/Aus-Schalter 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) }
}

Beispiel: Ein/Aus-Button mit vorangestelltem Symbol

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}