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 Button composant est un composant interactif optimisé pour la saisie sur les lunettes IA. Il fournit un retour visuel clair pour les états non mis au point, mis au point 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 de bouton proviennent de drawables vectoriels XML locaux (R.drawable.ic_favorite) à l'aide de painterResource, ce qui remplace la Icons.Default dépendance de la bibliothèque pour un chargement optimisé des assets.
• 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 le remplissage interne et la mise à l'échelle du texte pour s'aligner sur les spécifications de conception standard de Jetpack Compose Glimmer sans modificateurs de taille explicites.