Indiquer l'état de sélection

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

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

Indication du focus dans la thématisation Material

Les composants Material utilisent la fonction ripple et LocalIndication pour dessiner les changements d'état visuel. Pour associer un retour d'informations standard Material sur la sélection à un composant personnalisé :

1. Créez un MutableInteractionSource à l'aide de remember { MutableInteractionSource() }.
2. Transmettez la source d'interaction au modificateur indication, ainsi que 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 sélection personnalisées

Pour les repères visuels personnalisés (tels que la mise à l'échelle, les bordures ou les effets de lueur) :

1. Créez un IndicationNodeFactory.
2. Observez les interactions de sélection émises par l'élément InteractionSource.
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