Modifier l'ordre de balayage du curseur

La section Ordre de balayage du curseur par défaut décrit comment Compose ajoute automatiquement un comportement de balayage à vos éléments, pour la navigation unidimensionnelle (clé tab) et la navigation bidimensionnelle (touches fléchées). Dans certains cas, vous devrez peut-être remplacer ce comportement par défaut et indiquer plus explicitement l'ordre de balayage requis.

Remplacer l'ordre de balayage unidimensionnel

Pour modifier l'ordre de balayage par défaut du focus pour la navigation unidimensionnelle, vous devez créer un ensemble de références, une pour chaque composable sélectionnable:

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

Utilisez ensuite le modificateur focusRequester pour associer chacun d'eux à un composable:

Column {
    Row {
        TextButton({}, Modifier.focusRequester(first)) { Text("First field") }
        TextButton({}, Modifier.focusRequester(third)) { Text("Third field") }
    }

    Row {
        TextButton({}, Modifier.focusRequester(second)) { Text("Second field") }
        TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Vous pouvez maintenant utiliser le modificateur focusProperties pour spécifier un ordre de balayage personnalisé:

Column {
    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(first)
                .focusProperties { next = second }
        ) {
            Text("First field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(third)
                .focusProperties { next = fourth }
        ) {
            Text("Third field")
        }
    }

    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(second)
                .focusProperties { next = third }
        ) {
            Text("Second field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(fourth)
                .focusProperties { next = first }
        ) {
            Text("Fourth field")
        }
    }
}
FocusSnippets.kt

Remplacer l'ordre de balayage en deux dimensions

Il est également possible d'ajouter un contrôle ultraprécis de l'ordre de balayage du focus pour la navigation en deux dimensions à l'aide des touches fléchées. Pour chaque élément, vous pouvez remplacer la destination de navigation par défaut pour chacune des directions en ajoutant le modificateur focusProperties et en spécifiant l'élément qui doit apparaître vers le haut, vers le bas ou dans n'importe quelle autre direction:

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

Cette technique utilise non seulement efficacement les flèches du clavier, mais fonctionne également avec des pavés directionnels et des manettes sur des manettes filaires ou sans fil.