Indicare lo stato attivo

Uno stato attivo fornisce un indicatore visivo chiaro per aiutare gli utenti a capire quale elemento UI ha attualmente lo stato attivo. Tutti i componenti interattivi di Material 3 forniscono indicazioni di stato attivo integrate per impostazione predefinita.

Nota: questa guida spiega come disegnare indicatori di stato attivo visivi. Per ascoltare in modo programmatico le transizioni dello stato attivo, eseguire query sui flag dello stato attivo (isFocused, hasFocus, isCaptured) o attivare modifiche dell'interfaccia utente basate sullo stato, consulta Reagisci allo stato attivo.

Indicazione di focus del tema di Material

I componenti Material utilizzano la funzione ripple e LocalIndication per disegnare le modifiche dello stato visivo. Per allegare il feedback standard sullo stato attivo di Material a un componente personalizzato:

1. Crea un MutableInteractionSource utilizzando remember { MutableInteractionSource() }.
2. Passa l'origine dell'interazione al modificatore indication, insieme a 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

Implementa indicatori di selezione personalizzati

Per gli indicatori visivi personalizzati (come ridimensionamento, bordi o effetti di luce):

1. Crea un IndicationNodeFactory.
2. Osserva le interazioni di stato attivo generate dall'elemento InteractionSource.
3. Applica l'indicazione personalizzata utilizzando il modificatore indication.

var interactionSource = remember { MutableInteractionSource() }

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