Fokus wiederherstellen

Wenn Nutzer komplexe Benutzeroberflächen mit einer Hardwaretastatur oder einem Steuerkreuz bedienen, wechseln sie häufig zwischen verschiedenen Bereichen des Bildschirms, z. B. von einer seitlichen Navigationsleiste zu einer Inhaltsliste, interagieren mit einem Element und springen dann zurück. Mit der Fokuswiederherstellung können sich Container das zuvor fokussierte untergeordnete Element merken und den Fokus darauf zurücksetzen, wenn der Fokus wieder in den Container gelangt.

Fokus in scrollbaren Containern wiederherstellen

In Jetpack Compose fungieren scrollbare Container wie LazyColumn, LazyRow und LazyVerticalGrid automatisch als Fokusgruppen. Wenn Sie die Fokuswiederherstellung für eine Lazy List oder ein Lazy Grid aktivieren möchten, hängen Sie den Modifier focusRestorer an:

LazyColumn(
    modifier = Modifier.focusRestorer()
) {
    items(items) { item ->
        Button(onClick = { /* Handle click */ }) {
            Text(item)
        }
    }
}
FocusRestoration.kt

Wenn der Fokus den LazyColumn verlässt, wird im Container aufgezeichnet, welches Element aktiv war. Wenn der Nutzer zur Liste zurückkehrt, wird der Fokus auf dieses Element zurückgesetzt, anstatt wieder oben zu beginnen.

Fokus in Zeile und Spalte wiederherstellen

Im Gegensatz zu Containern mit Lazy Layout wird bei standardmäßigen nicht scrollbaren Layoutcontainern wie Row und Column standardmäßig keine Fokusgrenze festgelegt. Da sie Fokus-Eintrittsereignisse nicht von selbst abfangen, reicht die alleinige Anwendung des Modifikators focusRestorer nicht aus.

Wenn Sie die Wiederherstellung des Fokus auf Row oder Column aktivieren möchten, kombinieren Sie focusGroup mit focusRestorer:

Row(
    modifier = Modifier
        .focusGroup()
        .focusRestorer()
) {
    Button(onClick = { /* Action 1 */ }) {
        Text("First item")
    }
    Button(onClick = { /* Action 2 */ }) {
        Text("Second item")
    }
    Button(onClick = { /* Action 3 */ }) {
        Text("Third item")
    }
}
FocusRestoration.kt

Fallback-Fokusziel angeben

Wenn der Fokus zum ersten Mal in einen Container gelangt, ist kein untergeordnetes Element vorhanden, das zuvor den Fokus hatte. Compose folgt der Standardreihenfolge für den Fokus, um zu bestimmen, welches untergeordnete Element fokussiert werden soll.

Sie können an focusRestorer (oder an eine Lambda-Funktion, die in früheren Compose-Versionen ein FocusRequester zurückgibt) ein Fallback-FocusRequester übergeben, um festzulegen, welches untergeordnete Element beim ersten Aufruf den Fokus erhält:

val firstItemRequester = remember { FocusRequester() }

LazyColumn(
    modifier = Modifier.focusRestorer(firstItemRequester)
) {
    itemsIndexed(items) { index, item ->
        val itemModifier = if (index == 0) {
            Modifier.focusRequester(firstItemRequester)
        } else {
            Modifier
        }
        Button(
            onClick = { /* Handle click */ },
            modifier = itemModifier
        ) {
            Text(item)
        }
    }
}
FocusRestoration.kt

Wenn zuvor kein untergeordnetes Element fokussiert wurde oder die Wiederherstellung des Fokus fehlschlägt, wird der Fokus in Compose auf das zugehörige Fallback-Ziel verschoben.

Fokus direkt auf das ausgewählte Element in Navigationskomponenten verschieben

In Navigationskomponenten wie NavigationRail, NavigationBar, NavigationDrawer oder TabRow wird erwartet, dass der Fokus auf dem aktuell ausgewählten Ziel landet, wenn die Komponente über den Inhaltsbereich aufgerufen wird.

Sie können den Fokus auf das aktive Ziel lenken, indem Sie Modifier.focusGroup() mit focusProperties kombinieren und die Property onEnter (oder enter in früheren Compose-Versionen) festlegen:

val (homeRequester, searchRequester, settingsRequester) = remember { FocusRequester.createRefs() }

val selectedRequester = when (currentDestination) {
    "home" -> homeRequester
    "search" -> searchRequester
    "settings" -> settingsRequester
    else -> homeRequester
}

NavigationRail(
    modifier = modifier
        .focusProperties {
            // Redirect focus to the selected item when focus enters the navigation rail
            onEnter = { selectedRequester.requestFocus() }
        }
        .focusGroup()
) {
    NavigationRailItem(
        selected = currentDestination == "home",
        onClick = { onNavigate("home") },
        icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
        label = { Text("Home") },
        modifier = Modifier.focusRequester(homeRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "search",
        onClick = { onNavigate("search") },
        icon = { Icon(Icons.Default.Search, contentDescription = "Search") },
        label = { Text("Search") },
        modifier = Modifier.focusRequester(searchRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "settings",
        onClick = { onNavigate("settings") },
        icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") },
        label = { Text("Settings") },
        modifier = Modifier.focusRequester(settingsRequester)
    )
}
FocusRestoration.kt

Fokus bei Bildschirmübergängen wiederherstellen

Wenn ein Nutzer auf ein Element klickt, um zu einem Detailbildschirm zu wechseln, und dann mit der Schaltfläche „Zurück“ oder einer entsprechenden Geste zurückkehrt, können Sie den Fokus auf das Element zurücksetzen, auf das er geklickt hat.

So können Sie den Fokus bei Bildschirmübergängen beibehalten und wiederherstellen:

1. Verknüpfen Sie den Container mit einem FocusRequester.
2. Rufen Sie vor dem Auslösen des Navigationsereignisses saveFocusedChild() für die FocusRequester des Containers auf.
3. Wenn der Nutzer zum Bildschirm zurückkehrt, fordern Sie den anfänglichen Fokus auf den Container an oder rufen Sie restoreFocusedChild() auf.