Indiquer l'état de sélection

Un état de sélection fournit un repère visuel clair pour aider les utilisateurs à comprendre quel élément de l'UI détient actuellement le focus d'entrée. Tous les composants interactifs Material 3 fournissent des indications de focus intégrées par défaut.

Remarque : Ce guide explique comment dessiner des indications visuelles de focus. Pour écouter les transitions de focus de manière programmatique, interroger les indicateurs de focus (isFocused, hasFocus, isCaptured) ou déclencher des modifications de l'UI basées sur l'état, consultez Réagir au focus.

Indication de sélection du thème Material

Les composants Material utilisent la fonction ripple et LocalIndication pour dessiner les changements d'état visuels. Pour associer un retour de focus Material standard à un composant personnalisé :

1. Créez un MutableInteractionSource à l'aide de remember { MutableInteractionSource() }.
2. Transmettez la source d'interaction au modificateur indication, en plus de ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Implémenter des indications de focus personnalisées

Pour les repères visuels personnalisés (comme la mise à l'échelle, les bordures ou les effets lumineux) :

1. Créez un IndicationNodeFactory.
2. Observez les interactions de focus émises par le InteractionSource de l'élément.
3. Appliquez l'indication personnalisée à l'aide du modificateur indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt