Boutons dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR
Lunettes IA
En savoir plus sur les types d'appareils XR

Dans Jetpack Compose Glimmer, le composant Button est un composant interactif optimisé pour les entrées des lunettes d'IA. Il offre un retour visuel clair pour les états activé, survolé et appuyé afin de guider les actions de l'utilisateur.

Figure 1. Exemple de différents styles de boutons dans Jetpack Compose Glimmer.

Exemple : Variations de boutons

@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")
        }
    }
}

Points clés concernant le code

  • Les icônes des boutons proviennent de drawables vectoriels XML locaux (R.drawable.ic_favorite) à l'aide de painterResource, ce qui remplace la dépendance de la bibliothèque Icons.Default pour un chargement optimisé des éléments.
  • Les paramètres leadingIcon et trailingIcon sont utilisés pour injecter des composables d'icônes dans la mise en page du bouton, ce qui démontre la prise en charge par Jetpack Compose Glimmer du positionnement flexible des icônes.
  • Les boutons utilisent la configuration de dimensionnement par défaut, qui gère automatiquement la marge intérieure et la mise à l'échelle du texte pour s'aligner sur les spécifications de conception Glimmer de Jetpack Compose standard, sans modificateurs de taille explicites.