Fokusstatus angeben

Ein fokussierter Zustand bietet einen klaren visuellen Hinweis darauf, welches UI-Element derzeit den Eingabefokus hat. Alle interaktiven Material 3-Komponenten bieten standardmäßig integrierte Fokusindikatoren.

Fokusanzeige im Material Theme

Materialkomponenten verwenden die Funktion ripple und LocalIndication, um Änderungen des visuellen Status zu zeichnen. So hängen Sie Standard-Material-Fokus-Feedback an eine benutzerdefinierte Komponente an:

1. Erstellen Sie mit remember { MutableInteractionSource() } einen MutableInteractionSource.
2. Übergeben Sie die Interaktionsquelle zusammen mit ripple() an den Modifikator indication.

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

Benutzerdefinierte Fokusanzeigen implementieren

Für benutzerdefinierte visuelle Hinweise (z. B. Skalierung, Rahmen oder Leuchteffekte):

1. Erstellen Sie eine IndicationNodeFactory.
2. Beobachten Sie die Fokusinteraktionen, die von der InteractionSource des Elements ausgegeben werden.
3. Wenden Sie die benutzerdefinierte Angabe mit dem Modifikator indication an.

var interactionSource = remember { MutableInteractionSource() }

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