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 Tab ou des touches directionnelles (fléchées / pavé directionnel) :

• Tabulation / Maj+Tabulation : permet de déplacer la sélection vers l'avant ou vers l'arrière dans l'ordre d'apparition 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 déplace le curseur dans l'interface utilisateur en fonction de l'ordre d'apparition visuel à l'écran.

Par exemple, lorsque quatre boutons sont disposés en 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 déplace le focus de manière séquentielle sur les boutons dans l'ordre suivant :

1. 1er bouton (en haut à gauche)
2. Deuxième bouton (en haut)
3. 3e bouton (en bas à gauche)
4. 4e bouton (en bas)

Appuyer sur Tabulation sur le dernier élément permet de revenir à la première cible de sélection. Appuyez sur Maj+Tabulation pour déplacer le curseur 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 d'interface utilisateur pour déterminer la cible la plus proche dans la direction demandée.

Le balayage du curseur 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 le parcours de sélection avec les clics du pointeur

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

• Effacer le focus en appuyant ou en cliquant : cliquer ou appuyer sur un espace non interactif avec une souris ou un pavé tactile libère le focus de l'élément actif.
• Redémarrer le balayage : une fois le focus effacé, la prochaine pression sur la touche Tabulation redémarre le balayage unidimensionnel au niveau de la première cible de focus dans l'ordre d'apparence visuelle, plutôt que 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 la plus proche dans la direction demandée.

Pour en savoir plus sur la suppression programmatique de la sélection, consultez Déplacer et supprimer la sélection.

Personnaliser l'ordre de balayage du focus

Vous pouvez personnaliser le comportement de parcours avec le modificateur focusProperties.

Personnaliser l'ordre de balayage 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 le 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 balayage bidimensionnel

De même, vous pouvez ignorer le balayage du focus 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 par sélection 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 parcours par défaut du système pour une direction donnée, attribuez FocusRequester.Default.