Reagisci per concentrarti

Ogni volta che lo stato attivo cambia nell'albero di composizione, Compose attiva un evento di stato attivo che i modificatori principali e secondari possono osservare. Puoi utilizzare il modificatore onFocusChanged per ascoltare le transizioni dello stato di attivazione, eseguire query sulle proprietà di attivazione correnti e attivare aggiornamenti della UI basati sullo stato.

Osserva lo stato attivo con onFocusChanged

Il modificatore onFocusChanged fornisce un oggetto FocusState ogni volta che un elemento acquisisce o perde lo stato attivo.

Ad esempio, puoi osservare le modifiche dello stato attivo per aggiornare lo stato dei componenti personalizzati (ad esempio, modificare il colore del bordo di un elemento o attivare un'animazione):

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

In questo esempio, remember memorizza il colore del bordo tra le ricomposizioni e il colore del bordo viene aggiornato ogni volta che cambia lo stato di attivazione dell'elemento.

Nota: per le indicazioni di stato attivo standard di Material 3 (come gli effetti ripple o gli anelli di stato attivo), consulta Indica lo stato attivo.

Proprietà FocusState

L'oggetto FocusState passato a onFocusChanged fornisce tre proprietà chiave:

• isFocused: restituisce true se l'elemento componibile specifico a cui è collegato questo modificatore attualmente ha lo stato attivo di input.
• hasFocus: restituisce true se questo componibile o uno dei suoi componibili secondari ha attualmente lo stato attivo. Questo è utile per i contenitori principali (come schede o barre degli strumenti) che devono sapere quando un elemento secondario al loro interno è attivo.
• isCaptured: restituisce true se lo stato attivo è attualmente bloccato sull'elemento (ad esempio, durante le interazioni secondarie modali utilizzando captureFocus()). Durante l'acquisizione, il tentativo di spostare lo stato attivo su altri elementi non lo cancella.

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