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 wieder darauf legen, wenn der Fokus wieder auf den Container gelegt wird.

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 Modifikator 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 wiederhergestellt, anstatt oben neu zu beginnen.

Fokus in Zeile und Spalte wiederherstellen

Im Gegensatz zu Lazy-Layout-Containern wird bei standardmäßigen nicht scrollbaren Layout-Containern wie Row und Column standardmäßig keine Fokusgrenze festgelegt. Da sie Fokus-Eingabeereignisse nicht selbst abfangen, reicht es nicht aus, nur den Modifikator focusRestorer anzuwenden.

Wenn Sie die Fokuswiederherstellung für 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-Fokus-Ziel angeben

Wenn der Fokus zum ersten Mal auf einen Container wechselt, gibt es kein zuvor fokussiertes untergeordnetes Element. Compose folgt der Standardfokusreihenfolge, um zu bestimmen, welches untergeordnete Element fokussiert werden soll.

Sie können anpassen, welches untergeordnete Element beim ersten Eintrag den Fokus erhält, indem Sie einen Fallback-FocusRequester an focusRestorer übergeben (oder einen Lambda-Ausdruck, der in früheren Compose-Versionen einen FocusRequester zurückgibt):

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), verschiebt Compose den Fokus auf das zugehörige Fallback-Ziel.

Fokus auf das ausgewählte Element in Navigationskomponenten richten

In Navigationskomponenten wie NavigationRail, NavigationBar, NavigationDrawer oder TabRow erwarten Nutzer, dass der Fokus auf dem aktuell ausgewählten Ziel liegt, wenn sie die Komponente aus dem Inhaltsbereich aufrufen.

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 gelangen, und dann über den Button „Zurück“ oder die entsprechende Geste zurückkehrt, können Sie den Fokus auf das Element zurücksetzen, auf das er geklickt hat.

So behalten Sie den Fokus bei Bildschirmübergängen bei und stellen ihn wieder her:

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, fordere den anfänglichen Fokus auf den Container an oder rufe restoreFocusedChild() auf.