Fokusziele

Ein Fokusziel ist ein UI-Element, auf das der Tastaturfokus verschoben werden kann. Nutzer können den Tastaturfokus mit der Tabulatortaste oder den Richtungstasten (Pfeiltasten) verschieben:

• Tabulatortaste oder Umschalt + Tabulatortaste: Fokus in der eindimensionalen Reihenfolge vorwärts oder rückwärts bewegen.
• Richtungstasten: Fokus zweidimensional bewegen (Nach oben, Nach unten, Nach links und Nach rechts).

Interaktive UI-Elemente sind standardmäßig Fokusziele.

Eine interaktive Komponente ist standardmäßig ein Fokusziel. Ein UI-Element ist also ein Fokusziel, wenn Nutzer darauf tippen oder klicken können.

Nehmen wir beispielsweise drei Card-Komponenten an. Wenn die erste und dritte Karte interaktiv sind (sie definieren einen onClick-Callback), die zweite Karte jedoch rein informativ ist (keine Klickbehandlung), wird durch Drücken der Tabulatortaste auf der ersten Karte die zweite Karte übersprungen und direkt zur dritten Karte gewechselt.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Sie können die zweite Karte als Fokusziel festlegen, indem Sie den Parameter onClick angeben:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

Mit dem Modifikator clickable werden auch benutzerdefinierte oder Standard-UI-Elemente zu Fokus-Zielen. Weitere Informationen finden Sie unter Tippen und Drücken.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Composable als nicht anklickbares Fokusziel festlegen

Mit dem Modifikator focusable wird eine zusammensetzbare Funktion zu einem Fokusziel, ohne dass Klicksemantik erforderlich ist. Nutzer können den Tastaturfokus auf das geänderte Composable verschieben, um beispielsweise Inhalte mit Barrierefreiheitstools zu prüfen oder den Viewport zu scrollen. Durch Drücken der Eingabetaste oder der Leertaste wird jedoch keine Klickaktion ausgelöst:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Composable nicht fokussierbar machen

In einigen Fällen möchten Sie ein interaktives Element möglicherweise aus der Tastaturnavigation ausschließen, ohne Zeiger- oder Klickereignisse zu deaktivieren. Sie können verhindern, dass eine Komponente den Fokus erhält, indem Sie canFocus = false im Modifier focusProperties festlegen:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt