Cómo reaccionar al enfoque

Proporcionar indicadores visuales para facilitar la visualización del enfoque

Si bien todos los elementos enfocables del tema de Material ya tienen un estilo de enfoque coincide con el tema, quizás debas agregar algunos elementos visuales para que la el elemento enfocado sea más fácil de detectar. Una buena solución sería cambiar el borde de tu elemento con un color que tenga un buen contraste con el fondo:

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

En este ejemplo, remember se usa para almacenar el color del borde de y el esquema del elemento se actualiza cada vez que este gana o pierde concentración.

Implementa señales visuales avanzadas

Con Jetpack Compose, también puedes crear imágenes más sofisticadas y avanzadas que coincidan mejor con tu IU.

1. Primero, crea un IndicationInstance que dibuje visualmente la indicación que deseas en tu IU:

   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. A continuación, crea un Indication y recuerda el estado enfocado:

   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. Agrega Indication y InteractionSource a la IU mediante el modificador indication():

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

Comprende el estado del enfoque

Por lo general, cada vez que cambia un estado de enfoque, se activa un FocusEvent. del árbol, y los elementos superiores de un modificador focusable() pueden escucharlo con el Modificador onFocusChanged().

Si necesitas conocer el estado del enfoque,puedes usar estas APIs junto con el modificador onFocusChanged:

• isFocused muestra true si el elemento componible al que se adjunta el modificador está enfocado
• hasFocus funciona de manera similar a isFocused, pero con una diferencia sustancial: en lugar de comprobar solo la actual, comprueba si el elemento o uno de sus se concentra
• isCaptured muestra true cada vez que se mantiene el enfoque. Esto sucede por ejemplo, cuando un TextField contiene datos incorrectos, de modo que intentar enfocar otros elementos no borrarán el enfoque.

Estos campos se muestran a continuación:

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