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.

Hinweis :In dieser Anleitung wird beschrieben, wie Sie visuelle Fokusindikatoren zeichnen. Informationen dazu, wie du programmatisch auf Fokusübergänge reagierst, Fokus-Flags (isFocused, hasFocus, isCaptured) abfragst oder zustandsbasierte Änderungen der Benutzeroberfläche auslöst, findest du unter Auf Fokus reagieren.

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