Grouper les cibles de sélection

Vous pouvez regrouper plusieurs cibles de focus à l'aide du modificateur focusGroup. Le regroupement vous permet de gérer les hiérarchies de focus, d'isoler les régions d'UI logiques (comme les barres d'outils, les actions de boîte de dialogue ou les listes de cartes) et d'intercepter le focus lorsqu'il entre dans une région ou en sort.

Concepts de groupe d'étude : entrée, sortie et parcours par défaut

Un groupe d'étude établit une limite de navigation cohérente autour de ses cibles de sélection enfants. Pour comprendre comment la sélection se déplace au-delà de cette limite, vous devez connaître deux concepts clés :

• Enter : événement qui se produit lorsque la sélection passe d'un élément en dehors du groupe de sélection à un élément à l'intérieur du groupe.
• Sortie : événement qui se produit lorsque le focus quitte le dernier élément interne du groupe et passe à une cible de focus externe.

Comportement par défaut du parcours de tabulation

Par défaut, lorsqu'un groupe de focus reçoit le focus depuis l'extérieur :

1. Entrer dans le groupe : Compose sélectionne automatiquement une cible de mise au point enfant interne. Pour la navigation unidimensionnelle (Tab), il sélectionne le premier enfant dans l'ordre d'apparence visuelle. Pour la navigation bidimensionnelle (flèche directionnelle ou pavé directionnel), il sélectionne l'enfant géométriquement le plus proche de la direction entrante.
2. Navigation dans le groupe : des appuis répétés sur la touche de navigation permettent de déplacer le focus entre les cibles de focus frères incluses dans le groupe.
3. Quitter le groupe : une fois que l'utilisateur a parcouru la dernière cible de focus à l'intérieur du groupe, la prochaine pression sur une touche quitte le groupe et déplace le focus vers la cible de focus voisine à l'extérieur du groupe.

Personnaliser la redirection de l'entrée de sélection

Dans de nombreuses conceptions d'UI, la cible d'entrée par défaut (telle que le premier enfant dans l'ordre d'apparence) n'est pas le choix le plus logique ni le plus pratique pour l'utilisateur.

Intention et cas d'utilisation

Prenons l'exemple d'une boîte de dialogue de confirmation avec un bouton "Annuler" à gauche et un bouton "Confirmer" principal à droite. Lorsque l'utilisateur accède à la barre de boutons à partir d'un champ de formulaire :

• Comportement par défaut : la sélection se ferait sur "Annuler", car il s'agit du premier bouton dans l'ordre d'apparence visuelle.
• Comportement attendu : comme "Confirmer" est l'action principale recommandée, vous pouvez faire en sorte que la sélection se porte directement sur "Confirmer" lorsque l'utilisateur accède au groupe de boutons depuis le début de l'ordre de sélection, tout en lui permettant d'appuyer sur Gauche pour sélectionner "Annuler" si nécessaire.

Voici d'autres cas d'utilisation courants :

• Déplacer le focus directement sur l'onglet actuellement sélectionné lors de la saisie d'un TabRow.
• Déplacer directement le focus sur le bouton "Lecture / Pause" lorsque l'utilisateur accède à une barre de lecture multimédia.

Implémentation avec onEnter et FocusRequester

Pour rediriger le focus lors de l'entrée dans un groupe d'étude :

1. Appliquez le modificateur focusGroup au conteneur parent qui englobe les cibles de focus associées.
2. Appliquez le modificateur focusProperties au conteneur et configurez le rappel onEnter.
3. Dans le rappel onEnter (portée définie sur FocusEnterExitScope), appelez requestFocus() sur un FocusRequester associé à l'enfant par défaut préféré à l'aide de focusRequester.

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}
FocusGroup.kt

Dans onEnter et onExit, vous pouvez également appeler cancelFocusChange() pour bloquer complètement les transitions de focus au-delà de la limite, ou inspecter requestedFocusDirection pour personnaliser le routage en fonction de la méthode de navigation de l'utilisateur (Tabulation, Flèche vers le bas ou Flèche vers la gauche).

Les conteneurs de défilement sont des groupes de focus par défaut

Dans Jetpack Compose, les conteneurs à faire défiler tels que LazyRow, LazyColumn et LazyVerticalGrid agissent automatiquement comme des groupes de mise au point. Vous n'avez pas besoin d'appliquer explicitement le modificateur focusGroup pour définir les rappels onEnter ou onExit.