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 sélection, d'isoler les régions logiques de l'interface utilisateur (telles que les barres d'outils, les actions de boîte de dialogue ou les listes de fiches) et d'intercepter l'entrée ou la sortie d'une région.

Concepts des groupes 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 le curseur se déplace au-delà de cette limite, il faut s'appuyer sur deux concepts clés :

• Enter : événement qui se produit lorsque le focus passe d'un élément situé en dehors du groupe de focus à un élément situé à 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 balayage du curseur

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

1. Entrée dans le groupe : Compose sélectionne automatiquement une cible de sélection enfant interne. Pour la navigation unidimensionnelle (Tab), il sélectionne le premier enfant dans l'ordre d'apparence visuelle. Pour la navigation bidimensionnelle (touches fléchées ou pavé directionnel), il sélectionne l'enfant le plus proche géométriquement de la direction entrante.
2. Navigation au sein du groupe : des appuis répétés sur la touche de navigation déplacent le curseur entre les cibles de focus sœurs incluses dans le groupe.
3. Quitter le groupe : une fois que l'utilisateur a dépassé la dernière cible de sélection dans le groupe, la prochaine pression sur une touche quitte le groupe et déplace la sélection vers la cible de sélection voisine en dehors du groupe.

Personnaliser la redirection de l'entrée de focus

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

Objectif et cas d'utilisation

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

• Comportement par défaut : le curseur se place sur "Annuler", car il s'agit du premier bouton dans l'ordre d'affichage visuel.
• Comportement prévu : étant donné que "Confirmer" est l'action recommandée principale, vous pouvez placer le curseur directement sur "Confirmer" lorsque vous entrez dans le groupe de boutons plus tôt dans l'ordre de sélection, tout en permettant à l'utilisateur d'appuyer sur Gauche pour sélectionner "Annuler" si nécessaire.

Voici d'autres cas d'utilisation courants :

• Placer le focus directement sur l'onglet actuellement sélectionné lors de la saisie d'un TabRow.
• Déplacer le curseur directement sur la commande "Lecture / Pause" lorsque vous accédez à 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 englobant les cibles de focus associées.
2. Appliquez le modificateur focusProperties au conteneur et configurez le rappel onEnter.
3. Dans le rappel onEnter (limité à 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 selon que l'utilisateur a navigué à l'aide de Tab, Bas ou Gauche.

Les conteneurs à défilement sont des groupes de sélection par défaut

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