Rail de navigation

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Les rails permettent d'accéder aux destinations dans les applications exécutées sur des appareils à grand écran. Vous devez utiliser des rails de navigation pour:

• Destinations de haut niveau qui doivent être accessibles partout dans une application
• Trois à sept destinations principales
• Mises en page pour tablette ou ordinateur

Cette page vous explique comment afficher des rails dans votre application avec des écrans associés et une navigation de base.

Surface d'API

Utilisez le composable NavigationRail avec NavigationRailItem pour implémenter un rail dans votre application. NavigationRailItem représente un seul élément de rail dans la colonne "Rail".

NavigationRailItem inclut les principaux paramètres suivants:

• selected: détermine si l'élément de rail actuel est mis en surbrillance visuellement.
• onClick(): fonction lambda obligatoire qui définit l'action à effectuer lorsque l'utilisateur clique sur l'élément du rail. C'est là que vous gérez généralement les événements de navigation, mettez à jour l'état de l'élément de rail sélectionné ou chargez le contenu correspondant.
• label: affiche le texte dans l'élément du rail. Facultatif.
• icon: affiche une icône dans l'élément du rail. Facultatif.

Exemple: Navigation par rail

L'extrait de code suivant implémente un rail de navigation afin que les utilisateurs puissent naviguer entre les différents écrans d'une application:

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Points essentiels

• NavigationRail affiche une colonne verticale d'éléments de rail, chaque élément correspondant à un Destination.
• val navController = rememberNavController() crée et mémorise une instance de NavHostController, qui gère la navigation dans un NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gère l'état de l'élément de rail actuellement sélectionné.
  • startDestination.ordinal obtient l'index numérique (position) de l'entrée d'énumération Destination.SONGS.
• Lorsqu'un élément de rail est cliqué, navController.navigate(route = destination.route) est appelé pour accéder à l'écran correspondant.
• Le lambda onClick de NavigationRailItem met à jour l'état selectedDestination pour mettre en surbrillance visuellement l'élément de rail sur lequel l'utilisateur a cliqué.
• Il appelle le composable AppNavHost, en transmettant les navController et startDestination, pour afficher le contenu réel de l'écran sélectionné.

Résultat

L'image suivante montre le résultat de l'extrait de code précédent:

Ressources supplémentaires

• Material 3 – Rail de navigation
• Navigation avec Compose