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 Umschalttaste + Tabulatortaste: Fokus in eindimensionaler Reihenfolge vorwärts oder rückwärts bewegen.
• Richtungstasten: Fokus zweidimensional verschieben (Nach oben, Nach unten, Nach links und Nach rechts).

Interaktive UI-Elemente sind standardmäßig Fokussierungsziele

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 als Beispiel drei Card-Komponenten. Wenn die erste und die dritte Karte interaktiv sind (sie definieren einen onClick-Callback), die zweite Karte aber rein informativ ist (keine Klickverarbeitung), 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 zu einem Fokus-Ziel machen, indem Sie den Parameter onClick angeben:

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

Der Modifikator clickable wandelt auch benutzerdefinierte oder Standard-UI-Elemente in Fokussierungsziele um. Weitere Informationen findest du unter Tippen und drücken.

Warnung: Verwenden Sie nicht gleichzeitig den Modifikator focusable und den Modifikator clickable. Dies führt zu fehlerhaftem Verhalten, da zwei unabhängige Fokusziele erstellt werden.

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

Composable zu einem nicht anklickbaren Fokusziel machen

Mit dem Modifikator focusable wird eine komponierbare Funktion zu einem Fokusziel, ohne dass eine Klicksemantik erforderlich ist. Nutzer können den Tastaturfokus auf das geänderte Composable verschieben, z. B. um Inhalte mit Bedienungshilfen zu prüfen oder im Darstellungsbereich 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 Szenarien möchten Sie möglicherweise ein interaktives Element von 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 focusProperties-Modifikator 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