Restaurer le focus

Lorsque les utilisateurs naviguent dans des interfaces utilisateur complexes à l'aide d'un clavier physique ou d'un pavé directionnel, ils se déplacent fréquemment entre différentes sections de l'écran, par exemple en passant d'un rail de navigation latéral à une liste de contenu, en interagissant avec un élément, puis en revenant en arrière. La restauration du focus permet aux conteneurs de se souvenir de l'élément enfant précédemment sélectionné et de restaurer le focus sur celui-ci lorsque le focus revient dans le conteneur.

Restaurer la sélection dans les conteneurs à faire défiler

Dans Jetpack Compose, les conteneurs à faire défiler tels que LazyColumn, LazyRow et LazyVerticalGrid agissent automatiquement comme des groupes de mise au point. Pour activer la restauration de la sélection sur une liste ou une grille à chargement différé, ajoutez le modificateur focusRestorer :

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

Lorsque le focus quitte le LazyColumn, le conteneur enregistre l'élément actif. Lorsque l'utilisateur revient à la liste, le focus est rétabli sur cet élément au lieu de redémarrer en haut.

Restaurer la sélection dans une ligne et une colonne

Contrairement aux conteneurs de mise en page à chargement différé, les conteneurs de mise en page standards non défilables tels que Row et Column n'établissent pas de limite de mise au point par défaut. Comme ils n'interceptent pas eux-mêmes les événements d'entrée de focus, il ne suffit pas d'appliquer le modificateur focusRestorer seul.

Pour activer la restauration du focus sur Row ou Column, combinez focusGroup avec 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

Spécifier une cible de sélection de remplacement

Lorsqu'un conteneur est sélectionné pour la première fois, aucun enfant précédemment sélectionné n'existe. Compose suit l'ordre de sélection par défaut pour déterminer quel enfant sélectionner.

Vous pouvez personnaliser l'enfant qui reçoit le focus lors de la première entrée en transmettant un FocusRequester de secours à focusRestorer (ou un lambda renvoyant un FocusRequester sur les versions Compose antérieures) :

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

Si aucun enfant n'a été ciblé précédemment (ou si la restauration de la sélection échoue), Compose déplace la sélection vers la cible de remplacement associée.

Diriger la sélection vers l'élément sélectionné dans les composants de navigation

Dans les composants de navigation tels que NavigationRail, NavigationBar, NavigationDrawer ou TabRow, les utilisateurs s'attendent à ce que la sélection se porte sur la destination actuellement sélectionnée lorsqu'ils accèdent au composant depuis la zone de contenu.

Vous pouvez diriger la sélection vers la destination active en combinant Modifier.focusGroup() avec focusProperties et en définissant la propriété onEnter (ou enter sur les versions antérieures de Compose) :

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

Restaurer la mise au point lors des transitions d'écran

Lorsqu'un utilisateur clique sur un élément pour accéder à un écran de détails, puis revient en arrière à l'aide du bouton ou du geste Retour, vous pouvez rétablir la sélection de l'élément sur lequel il a cliqué.

Pour préserver et restaurer le focus lors des transitions d'écran :

1. Associez le conteneur à un FocusRequester.
2. Avant de déclencher l'événement de navigation, appelez saveFocusedChild() sur le FocusRequester du conteneur.
3. Lorsque l'utilisateur revient à l'écran, demandez la mise au point initiale sur le conteneur ou appelez restoreFocusedChild().