Réagir à la mise au point

Chaque fois que la sélection change dans l'arborescence de composition, Compose déclenche un événement de sélection que les modificateurs parents et enfants peuvent observer. Vous pouvez utiliser le modificateur onFocusChanged pour écouter les transitions d'état de sélection, interroger les propriétés de sélection actuelles et déclencher des mises à jour de l'UI basées sur l'état.

Observer l'état de sélection avec onFocusChanged

Le modificateur onFocusChanged fournit un objet FocusState chaque fois qu'un élément gagne ou perd la sélection.

Par exemple, vous pouvez observer les changements de sélection pour mettre à jour l'état d'un composant personnalisé (par exemple, en modifiant la couleur de bordure d'un élément ou en déclenchant une animation) :

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

Dans cet exemple, remember stocke la couleur de la bordure entre les recompositions, et la couleur de la bordure est mise à jour chaque fois que l'état de sélection de l'élément change.

Remarque : Pour en savoir plus sur les indications de sélection Material 3 standards (comme les effets d'ondulation ou les anneaux de sélection), consultez Indiquer l'état de sélection.

Propriétés de FocusState

L'objet FocusState transmis à onFocusChanged fournit trois propriétés clés :

• isFocused : renvoie true si le composable spécifique auquel ce modificateur est associé est actuellement sélectionné pour la saisie.
• hasFocus : renvoie true si ce composable ou l'un de ses composables enfants est actuellement sélectionné. Cela est utile pour les conteneurs parents (comme les fiches ou les barres d'outils) qui doivent savoir quand un enfant est actif.
• isCaptured : renvoie true si l'élément est actuellement sélectionné (par exemple, lors de sous-interactions modales à l'aide de captureFocus()). Lorsque l'élément est sélectionné, toute tentative de déplacer la sélection vers d'autres éléments ne l'efface pas.

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