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 →

En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, un Button est un composant interactif optimisé pour la saisie sur des lunettes d'affichage. Il fournit un retour visuel clair grâce à ses états pour guider les actions de l'utilisateur.

Les boutons sont basés sur le système de surface Jetpack Compose Glimmer, qui gère automatiquement les propriétés physiques telles que les bordures et la profondeur.

Le bouton standard contient un libellé de texte et des icônes facultatives. Vous pouvez l'utiliser pour des actions principales ou secondaires. Il existe également des boutons spécialisés, tels que les boutons d'icône et les boutons bascule, qui sont définis comme des composants distincts dans Jetpack Compose Glimmer.

Par défaut

Grande

Anatomie

Un bouton se compose d'un conteneur et d'un libellé, avec des icônes de début et de fin facultatives.

Tailles

Les boutons Jetpack Compose Glimmer sont disponibles en deux tailles. Elles affectent la hauteur minimale et le remplissage interne.

États

Les boutons de Jetpack Compose Glimmer modifient leur apparence pour communiquer leur état.

• Activé : état par défaut d'un bouton interactif.
• Sélectionné : lorsqu'il est sélectionné, le bouton applique un GlimmerTheme.depthEffectLevels.level1 et une bordure de sélection.
• Appuyé : lorsqu'il est activé, une superposition blanche semi-transparente est appliquée à la surface.
• Désactivé : le bouton ne répond pas à la saisie et son apparence visuelle est ajustée.

Paramètres par défaut des boutons

Les paramètres par défaut suivants s'appliquent aux boutons standards :

• Par défaut, les boutons utilisent GlimmerTheme.typography.bodySmall. Assurez-vous que le texte des boutons est concis et décrit clairement l'action.
• La forme par défaut d'un bouton est GlimmerTheme.shapes.large. Cet arrondi cohérent aide les utilisateurs à identifier les boutons dans l'interface des lunettes d'affichage.

Exemple : bouton avec texte et icônes

Un bouton de base n'inclut qu'un libellé de texte, mais vous pouvez également ajouter des icônes au début (à l'aide de leadingIcon) ou à la fin (à l'aide de trailingIcon) du texte pour fournir un contexte supplémentaire.

Le code suivant crée un bouton avec une icône de début et de fin :

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Groupes de boutons

Le ButtonGroup composable vous permet de regrouper des boutons dans une ligne défilable qui fait office de contrôleur de sélection. Lorsque l'utilisateur fait défiler la page, la sélection se déplace automatiquement pour mettre en évidence le bouton correspondant à la position de défilement actuelle.

Exemple : groupes de boutons

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Contrôle de la sélection dans les groupes de boutons

Vous pouvez déplacer la sélection vers n'importe quel bouton d'un groupe pour contrôler manuellement la sélection.

Personnalisez et contrôlez le comportement de défilement à l'aide de l'état ButtonGroup :

1. Déclarez l'état avec rememberButtonGroupState.
2. Transmettez-le au composable ButtonGroup.
3. Appelez animateScrollToItem (ou scrollToItem pour un défilement instantané ) afin de faire défiler la page jusqu’à un élément spécifique et de le sélectionner automatiquement.

Le code suivant déplace la sélection d'un bouton à un autre lorsque vous cliquez dessus :

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt