Fokus-Durchlaufreihenfolge

Nutzer können den Tastaturfokus mit der Tabulatortaste oder den Richtungstasten (Pfeiltasten / Steuerkreuz) zwischen UI-Elementen verschieben:

• Tabulatortaste / 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).

Eindimensionaler Fokuswechsel

Bei der eindimensionalen Fokusnavigation wird der Fokus mit der Tabulatortaste anhand der visuellen Reihenfolge der Darstellung auf dem Bildschirm durch die Benutzeroberfläche bewegt.

Beispiel: Vier Schaltflächen sind in Zeilen angeordnet:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

Wenn Sie die Tabulatortaste drücken, wird der Fokus nacheinander auf die Schaltflächen in der folgenden Reihenfolge verschoben:

1. 1. Button (oben links)
2. 2. Taste (oben)
3. 3. Button (unten links)
4. 4. Taste (unten)

Wenn Sie beim letzten Element die Tabulatortaste drücken, wird der Fokus wieder auf das erste Element gesetzt. Wenn Sie die Umschalttaste + Tabulatortaste drücken, wird der Fokus in umgekehrter Reihenfolge verschoben.

Zweidimensionaler Fokuswechsel

Durch Drücken der Pfeiltasten auf der Tastatur oder Verwendung eines Steuerkreuzes wird ein zweidimensionaler Fokusdurchlauf ausgelöst.

Bei der zweidimensionalen Navigation prüft das System die geometrischen Koordinaten und räumlichen Grenzen von UI-Elementen, um das nächstgelegene Ziel in der angeforderten Richtung zu ermitteln.

Die zweidimensionale Fokusnavigation wird nicht umgebrochen. Wenn der Nutzer die Abwärtstaste drückt, während das unterste Element fokussiert ist, bleibt der Fokus auf diesem Element, anstatt zum oberen Bildschirmrand zu springen.

Fokuswechsel mit Zeigerklicks zurücksetzen

Beim Wechsel zwischen einer physischen Tastatur und einer Maus oder einem Touchpad auf Desktop- oder Großbildschirmgeräten:

• Fokus beim Tippen oder Klicken aufheben: Wenn Sie mit der Maus oder dem Touchpad auf einen nicht interaktiven Bereich klicken oder tippen, wird der Fokus vom aktiven Element entfernt.
• Durchlauf neu starten: Nachdem der Fokus gelöscht wurde, wird beim nächsten Drücken der Tabulatortaste der eindimensionale Durchlauf beim ersten Fokusziel in der Reihenfolge der visuellen Darstellung neu gestartet, anstatt beim zuvor aktiven Element fortgesetzt zu werden. Sie entspricht der zweidimensionalen Fokus-Durchquerung. Mit den Richtungstasten wird der Tastaturfokus auf das nächstgelegene Fokusziel in der gewünschten Richtung verschoben.

Weitere Informationen zum programmatischen Löschen des Fokus finden Sie unter Fokus verschieben und löschen.

Durchlaufreihenfolge des Fokus anpassen

Mit dem Modifikator focusProperties können Sie das Durchlaufverhalten anpassen.

Eindimensionale Durchlaufreihenfolge anpassen

Wenn Sie die eindimensionale Durchquerung überschreiben möchten, geben Sie das Attribut next oder previous mit einem FocusRequester an:

1. Erstellen Sie ein FocusRequester-Objekt mit remember { FocusRequester() }.
2. Hängen Sie die FocusRequester mit dem Modifikator focusRequester an die Ziel-Composable an.
3. Wenden Sie den Modifikator focusProperties auf die Quell-Composable an und weisen Sie FocusRequester next (für Tab) oder previous (für Umschalttaste + Tab) zu.

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

Zweidimensionale Durchlaufreihenfolge anpassen

Ebenso können Sie die zweidimensionale Fokus-Durchquerung überschreiben, indem Sie FocusRequester-Instanzen zu up, down, start, end, left oder right innerhalb von focusProperties zuweisen:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

Wenn Sie die Fokusnavigation in eine bestimmte Richtung blockieren möchten (z. B. an Layoutgrenzen), weisen Sie diesem Attribut FocusRequester.Cancel zu (z. B. down = FocusRequester.Cancel). Wenn Sie den Standard-Durchlaufalgorithmus des Systems für eine bestimmte Richtung explizit beibehalten möchten, weisen Sie FocusRequester.Default zu.