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

In Jetpack Compose Glimmer ist ein IconButton eine kompakte, interaktive Komponente, mit der sich zusätzliche Aktionen mit einem einzigen Tippen aufrufen lassen.

Schaltflächen mit Symbolen sind kleiner als Standardschaltflächen, haben aber eine physische Begrenzung, damit sie auf einer Brille mit Display leicht zu bedienen sind.

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 Status 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 × 48 dp

Interne Symbolgröße

32 × 32 dp

Standard-Inhalts-Padding

GlimmerTheme.componentSpacingValues.small

Bundesstaaten

Das Erscheinungsbild von Symbolschaltflächen in Jetpack Compose Glimmer ändert sich, um den Status zu kommunizieren.

  • Aktiviert: Das ist der Standardstatus für die Interaktivität.
  • Fokussiert: Wendet GlimmerTheme.depthEffectLevels.level1 und eine fokussierte Rahmenhervorhebung an.
  • Gedrückt: Wendet ein halbtransparentes weißes Overlay auf die Oberfläche an.
  • Deaktiviert: Die Schaltfläche ist nicht interaktiv und visuelles Feedback wird entfernt.

Standards für Symbolschaltflächen

Für Symbolschaltflächen gelten die folgenden Standardeinstellungen:

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

Beispiel: Symbolschaltfläche

Mit dem folgenden Code wird ein Symbol-Button mit Standardeigenschaften erstellt:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}