Réagir à la mise au point

Fournir des repères visuels pour une visualisation plus facile de la concentration

Tous les éléments sélectionnables du thème Material ont déjà un style de focus qui correspond au thème, vous devrez peut-être ajouter des éléments visuels pour élément ciblé plus facile à repérer. Une bonne solution serait de modifier la bordure du votre élément avec une couleur qui offre un bon contraste 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 permet de stocker la couleur de la bordure les recompositions, et le contour de l'élément est mis à jour chaque fois que l'élément gagne ou perd sa concentration.

Implémentez des repères visuels avancés

Avec Jetpack Compose, vous pouvez également créer des 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 que vous souhaitez dans votre interface utilisateur:

   private class MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
       Modifier.Node(), DrawModifierNode {
       private var isFocused = false
   
       override fun onAttach() {
           coroutineScope.launch {
               var focusCount = 0
               interactionSource.interactions.collect { interaction ->
                   when (interaction) {
                       is FocusInteraction.Focus -> focusCount++
                       is FocusInteraction.Unfocus -> focusCount--
                   }
                   val focused = focusCount > 0
                   if (isFocused != focused) {
                       isFocused = focused
                       invalidateDraw()
                   }
               }
           }
       }
   
       override fun ContentDrawScope.draw() {
           drawContent()
           if (isFocused) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Ensuite, créez un Indication et mémorisez l'état sélectionné:

   object MyHighlightIndication : IndicationNodeFactory {
       override fun create(interactionSource: InteractionSource): DelegatableNode {
           return MyHighlightIndicationNode(interactionSource)
       }
   
       override fun hashCode(): Int = -1
   
       override fun equals(other: Any?) = other === this
   }
   FocusSnippets.kt

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

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

Comprendre l'état de la mise au point

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

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

• isFocused renvoie true si le composable auquel le modificateur est associé cible
• hasFocus fonctionne de la même manière que isFocused, mais avec une différence importante: au lieu de vérifier uniquement l'état actuel, il vérifie si l'élément ou l'un de ses enfants est concentré
• isCaptured renvoie true chaque fois que l'élément d'interface actif est le focus. Cela se produit, par une instance, lorsqu'un TextField contient des données incorrectes, de sorte que le fait de tenter de et les autres éléments n'effacent pas le curseur.

Ces champs sont présentés ci-dessous:

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