Cibles de focus

Une cible de focus est un élément d'interface utilisateur sur lequel le focus clavier peut se déplacer. Les utilisateurs peuvent déplacer le focus clavier à l'aide de la touche Tabulation ou des touches directionnelles (fléchées) :

• Tabulation ou Maj+Tabulation : déplace le focus vers l'avant ou vers l'arrière dans l'ordre d'apparence unidimensionnel.
• Touches directionnelles : déplacez le focus de façon bidimensionnelle (Haut, Bas, Gauche et Droite).

Les éléments d'interface utilisateur interactifs sont des cibles de focus par défaut

Un composant interactif est une cible de focus par défaut. En d'autres termes, un élément d'UI est une cible de focus si les utilisateurs peuvent appuyer ou cliquer dessus.

Prenons l'exemple de trois composants Card. Si les première et troisième cartes sont interactives (elles définissent un rappel onClick), mais que la deuxième carte est purement informative (sans gestionnaire de clics), appuyer sur la touche Tabulation sur la première carte permet d'ignorer la deuxième carte et de passer directement à la troisième.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Vous pouvez définir la deuxième carte comme cible de focus en fournissant un paramètre onClick :

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

Le modificateur clickable transforme également les éléments d'UI personnalisés ou standards en cibles de focus. Pour en savoir plus, consultez Appuyer et maintenir le doigt.

Avertissement : N'utilisez pas les modificateurs focusable et clickable en même temps. Cela entraîne un comportement incorrect, car deux cibles de sélection indépendantes sont créées.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Faire d'un composable une cible de sélection non cliquable

Le modificateur focusable fait d'un composable une cible de focus sans nécessiter de sémantique de clic. Les utilisateurs peuvent déplacer le focus clavier vers le composable modifié (par exemple, pour inspecter le contenu avec des outils d'accessibilité ou faire défiler la fenêtre d'affichage), mais l'appui sur les touches Entrée ou Espace ne déclenche pas d'action de clic :

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Rendre un composable non sélectionnable

Dans certains cas, vous pouvez exclure un élément interactif de la navigation au clavier sans désactiver les événements de pointeur ou de clic. Vous pouvez empêcher un composant de recevoir le focus en définissant canFocus = false dans le modificateur focusProperties :

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt