Reagir ao foco

Sempre que o foco muda na árvore de composição, o Compose aciona um evento de foco que pode ser observado por modificadores principais e filhos. Você pode usar o modificador onFocusChanged para detectar transições de estado de foco, consultar as propriedades de foco atuais e acionar atualizações de interface orientadas por estado.

Observar o estado de foco com onFocusChanged

O modificador onFocusChanged fornece um objeto FocusState sempre que um elemento ganha ou perde o foco.

Por exemplo, é possível observar mudanças de foco para atualizar o estado do componente personalizado (como mudar a cor da borda de um elemento ou acionar uma animação):

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

Neste exemplo, remember armazena a cor da borda em todas as recomposições, e a cor da borda é atualizada sempre que o estado de foco do elemento muda.

Propriedades do FocusState

O objeto FocusState transmitido para onFocusChanged fornece três propriedades principais:

• isFocused: retorna true se o elemento combinável específico a que este modificador está anexado tiver o foco de entrada ativo no momento.
• hasFocus: retorna true se esse elemento combinável ou qualquer um dos elementos combináveis filhos estiver em foco. Isso é útil para contêineres principais (como cards ou barras de ferramentas) que precisam saber quando um elemento filho está ativo.
• isCaptured: retorna true se o foco estiver bloqueado no elemento (por exemplo, durante subinterações modais usando captureFocus()). Enquanto capturado, tentar mover o foco para outros elementos não limpa o foco.

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