Modifier l'ordre de balayage du curseur

La section Ordre de balayage par défaut des éléments sélectionnés explique comment Compose ajoute automatiquement le comportement de balayage de l'élément à vos éléments, à la fois unidimensionnelle (clé tab) et bidimensionnelle (touches fléchées). Dans certains dans certains cas, vous devrez peut-être ignorer ce comportement par défaut et être plus explicite l'ordre de balayage requis.

Remplacer l'ordre de balayage unidimensionnel

Pour modifier l'ordre de balayage par défaut pour la navigation unidimensionnelle, vous Créez 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 bidimensionnel

Il est également possible de contrôler précisément l'ordre de passage du curseur. pour une navigation bidimensionnelle à l'aide des touches fléchées. Pour chaque élément, vous pouvez remplacer la destination de navigation par défaut pour chacun des itinéraires en ajoutant le modificateur focusProperties et en spécifiant l'élément qui s'affichera, vers le bas ou dans toute 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 elle fonctionnerait avec Des pavés directionnels et des clés USB sur les manettes filaires et sans fil.