Cómo reaccionar al enfoque

Cada vez que cambia el enfoque en el árbol de composición, Compose activa un evento de enfoque que pueden observar los modificadores superiores y secundarios. Puedes usar el modificador onFocusChanged para escuchar las transiciones de estado de enfoque, consultar las propiedades de enfoque actuales y activar actualizaciones de la IU controladas por el estado.

Observa el estado de enfoque con onFocusChanged

El modificador onFocusChanged proporciona un objeto FocusState cada vez que un elemento obtiene o pierde el enfoque.

Por ejemplo, puedes observar los cambios de enfoque para actualizar el estado de un componente personalizado (como cambiar el color del borde de un elemento o activar una animación):

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 almacena el color del borde en las recomposiciones, y el color del borde se actualiza cada vez que cambia el estado de enfoque del elemento.

Nota: Para ver las indicaciones de enfoque estándar de Material 3 (como ondas o anillos de enfoque), consulta Cómo indicar el estado de enfoque.

Propiedades de FocusState

El objeto FocusState que se pasa a onFocusChanged proporciona tres propiedades clave:

• isFocused: Devuelve true si el elemento componible específico al que se adjunta este modificador tiene actualmente el foco de entrada activo.
• hasFocus: Devuelve true si este elemento componible o cualquiera de sus elementos secundarios tiene el foco actualmente. Esto es útil para los contenedores superiores (como tarjetas o barras de herramientas) que necesitan saber cuándo está activo cualquier elemento secundario dentro de ellos.
• isCaptured: Devuelve true si el enfoque está bloqueado en el elemento (por ejemplo, durante las interacciones secundarias modales con captureFocus()). Mientras se captura, los intentos de mover el enfoque a otros elementos no lo borran.

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}