Réagir à la mise au point

Fournir des repères visuels pour faciliter la visualisation de la concentration

Bien que tous les éléments sélectionnables de Material Theme aient déjà un style de focus correspondant au thème, vous devrez peut-être ajouter des éléments visuels pour qu'ils soient plus faciles à repérer. Une bonne solution consiste à modifier la bordure de votre élément avec une couleur qui contraste bien avec l'arrière-plan:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

Dans cet exemple, remember est utilisé pour stocker la couleur de la bordure entre les recompositions, et le contour de l'élément est mis à jour chaque fois que l'élément devient ou perd son focus.

Implémenter des repères visuels avancés

Jetpack Compose vous permet également de créer des repères visuels plus sophistiqués et avancés qui correspondent mieux à votre interface utilisateur.

1. Commencez par créer un IndicationInstance qui dessine visuellement le repère souhaité dans votre interface utilisateur :

   private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) :
       IndicationInstance {
       private val isEnabled by isEnabledState
       override fun ContentDrawScope.drawIndication() {
           drawContent()
           if (isEnabled) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Ensuite, créez un Indication et rappelez-vous l'état sélectionné :

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. Ajoutez Indication et InteractionSource à l'interface utilisateur via le modificateur indication() :

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

Comprendre l'état de la priorité

En règle générale, chaque fois qu'un état de sélection change, un FocusEvent est déclenché dans l'arborescence, et les parents d'un modificateur focusable() peuvent l'écouter à l'aide du modificateur onFocusChanged().

Si vous avez besoin de connaître l'état du focus,vous pouvez utiliser ces API avec le modificateur onFocusChanged:

• isFocused renvoie true si le composable auquel le modificateur est associé est sélectionné.
• hasFocus fonctionne de la même manière que isFocused, mais avec une différence importante : au lieu de vérifier uniquement l'actuel, il vérifie si l'élément ou l'un de ses enfants est sélectionné.
• isCaptured renvoie true chaque fois que la sélection est maintenue. Cela se produit, par exemple, lorsqu'un TextField contient des données incorrectes, si bien que le fait de cibler d'autres éléments n'efface pas le ciblage.

Ces champs sont indiqués ci-dessous:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}