Symbolschaltflä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 IconButton eine kompakte, interaktive Komponente, mit der zusätzliche Aktionen mit einem einzigen Tippen ausgeführt werden können.

Symbolschaltflächen sind kleiner als Standardschaltflächen, haben aber eine physische Begrenzung, um die Interaktion auf Displaybrillen zu erleichtern.

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

Beispiel für verschiedene Stile von Symbolschaltflächen in Jetpack Compose Glimmer. Diese Beispiele zeigen fünf Zustände von Symbolschaltflächen: aktiviert (1), fokussiert (2), gedrückt (3), deaktiviert (4), deaktiviert und fokussiert (5).

Größen und Abmessungen

Element Dimension

Mindestgröße des Containers

48 x 48 dp

Interne Symbolgröße

32 x 32 dp

Standardmäßiger Innenabstand

GlimmerTheme.componentSpacingValues.small

Zustände

Symbolschaltflächen in Jetpack Compose Glimmer ändern ihr Aussehen, um ihren Zustand zu kommunizieren.

  • Aktiviert: Der standardmäßige interaktive Zustand.
  • Fokussiert: Wendet GlimmerTheme.depthEffectLevels.level1 und eine fokussierte Rahmenhervorhebung an.
  • Gedrückt: Wendet eine halbtransparente weiße Überlagerung auf die Oberfläche an.
  • Deaktiviert: Die Schaltfläche ist nicht interaktiv und visuelles Feedback wird entfernt.

Standardwerte für Symbolschaltflächen

Die folgenden Standardwerte gelten für Symbolschaltflächen:

  • Form: Standardmäßig GlimmerTheme.shapes.large (in der Regel kreisförmig).
  • Farbe: Standardmäßig GlimmerTheme.colors.surface.
  • Inhaltsfarbe: Wird automatisch aus der Hintergrundfarbe berechnet, sofern nicht explizit angegeben.
  • Innenabstand: Gibt den Standardabstand zwischen dem Symbol und dem Containerrand an.
  • Mindestgröße: Ein fester 48.dp Wert, damit die Schaltflächen nicht zu klein für die Interaktion werden.
  • Symbolgröße: Standardmäßig GlimmerTheme.iconSizes.small (32.dp).

Beispiel: Symbolschaltfläche

Mit dem folgenden Code wird eine Symbolschaltfläche mit Standardeigenschaften erstellt:

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}