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