Schaltflächen in Jetpack Compose Glimmer

Anwendbare XR‑Geräte
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für diese Arten von XR-Geräten zu entwickeln.
Informationen zu XR-Gerätetypen →
AI Glasses
Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist die Komponente Button eine interaktive Komponente, die für die Eingabe über KI-Brillen optimiert ist. Sie bietet klares visuelles Feedback für die Zustände „Aktiviert“, „Mauszeiger darauf“ und „Gedrückt“, um Nutzeraktionen zu unterstützen.

Abbildung 1: Ein Beispiel für verschiedene Schaltflächenstile in Jetpack Compose Glimmer.

Beispiel: Schaltflächenvarianten

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

Wichtige Punkte zum Code

  • Die Schaltflächensymbole stammen aus lokalen XML-Vektordrawables (R.drawable.ic_favorite) und verwenden painterResource. Die Icons.Default-Bibliotheksabhängigkeit wurde ersetzt, um das Laden von Assets zu optimieren.
  • Mit den Parametern leadingIcon und trailingIcon werden Icon-Composables in das Schaltflächenlayout eingefügt. Dies zeigt, dass Jetpack Compose Glimmer eine flexible Positionierung von Symbolen unterstützt.
  • Die Schaltflächen verwenden die Standardkonfiguration für die Größe, bei der das interne Padding und die Textskalierung automatisch an die standardmäßigen Jetpack Compose-Glimmer-Designspezifikationen angepasst werden, ohne dass explizite Größenmodifikatoren erforderlich sind.