Focus traversal order (Ordre de balayage focus)

Les utilisateurs peuvent déplacer le focus clavier sur les éléments d'interface utilisateur à l'aide de la touche Tabulation ou des touches directionnelles (fléchées / pavé directionnel) :

• Tabulation / Maj+Tabulation : permet de sélectionner l'élément suivant ou précédent dans l'ordre d'affichage unidimensionnel.
• Touches directionnelles : déplacez le focus de façon bidimensionnelle (Haut, Bas, Gauche et Droite).

Balayage du curseur unidimensionnel

Dans le balayage du curseur unidimensionnel, la touche Tabulation fait avancer le curseur dans l'UI en fonction de l'ordre d'affichage visuel à l'écran.

Par exemple, lorsque quatre boutons sont disposés sur des lignes :

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

Appuyer sur la touche Tabulation permet de déplacer le focus de manière séquentielle sur les boutons dans l'ordre suivant :

1. 1er bouton (en haut à gauche)
2. 2e bouton (extrémité supérieure)
3. 3e bouton (en bas à gauche)
4. 4e bouton (en bas)

Si vous appuyez sur la touche Tabulation sur le dernier élément, vous revenez à la première cible de focus. Appuyer sur Maj+Tabulation permet de déplacer le focus dans l'ordre inverse.

Balayage du curseur bidimensionnel

Appuyer sur les touches fléchées du clavier ou utiliser un pavé directionnel déclenche un balayage du focus à deux dimensions.

Dans le balayage bidimensionnel, le système inspecte les coordonnées géométriques et les limites spatiales des éléments de l'UI pour déterminer la cible la plus proche dans la direction demandée.

Le balayage du focus bidimensionnel ne se termine pas. Si l'utilisateur appuie sur la touche Bas alors que l'élément le plus bas est sélectionné, la sélection reste sur cet élément au lieu de passer en haut de l'écran.

Réinitialiser la navigation au clavier avec des clics de pointeur

Lorsque vous passez d'un clavier physique à une souris ou un pavé tactile sur un ordinateur de bureau ou un appareil à grand écran :

• Effacer la sélection en appuyant ou en cliquant : cliquer ou appuyer sur un espace non interactif avec une souris ou un pavé tactile permet de désélectionner l'élément actif.
• Redémarrer le parcours : une fois le focus effacé, la prochaine pression sur la touche Tabulation redémarre le parcours unidimensionnel à la première cible de focus dans l'ordre d'apparence visuelle, au lieu de reprendre à partir de l'élément précédemment actif. Il est identique au balayage du focus bidimensionnel. Les touches directionnelles déplacent le focus clavier vers la cible de focus la plus proche dans la direction demandée.

Pour savoir comment effacer la sélection de manière programmatique, consultez Déplacer et effacer la sélection.

Personnaliser l'ordre de balayage du focus

Vous pouvez personnaliser le comportement de déplacement avec le modificateur focusProperties.

Personnaliser l'ordre de parcours unidimensionnel

Pour remplacer le parcours unidimensionnel, spécifiez la propriété next ou previous avec un FocusRequester :

1. Créez un objet FocusRequester avec remember { FocusRequester() }.
2. Associez FocusRequester au composable cible à l'aide du modificateur focusRequester.
3. Appliquez le modificateur focusProperties au composable source et attribuez FocusRequester à next (pour Tabulation) ou previous (pour Maj+Tabulation).

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

Personnaliser l'ordre de déplacement bidimensionnel

De même, vous pouvez remplacer le parcours de mise au point bidimensionnel en attribuant des instances FocusRequester à up, down, start, end, left ou right dans focusProperties :

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

Pour bloquer la navigation au clavier dans une direction spécifique (par exemple, aux limites de la mise en page), attribuez FocusRequester.Cancel à cette propriété (par exemple, down = FocusRequester.Cancel). Pour conserver explicitement l'algorithme de déplacement par défaut du système pour une direction donnée, attribuez FocusRequester.Default.