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() }
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") } } }
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") } } }
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 } ) {}
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.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Modifier le comportement de mise au point
- Curseur dans Compose