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

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

3. Agrega Indication y InteractionSource a la IU mediante el modificador indication():

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   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
}