Rail de navigation

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

• les destinations de premier niveau qui doivent être accessibles n'importe où dans une application ;
• trois à sept destinations principales ;
• les mises en page pour tablette ou ordinateur de bureau.

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 NavigationRail composable avec NavigationRailItem pour implémenter un rail dans votre application. NavigationRailItem représente un seul élément de rail dans la colonne du rail.

NavigationRailItem inclut les paramètres clés suivants :

• selected : détermine si l'élément de rail actuel est visuellement mis en surbrillance.
• onClick(): fonction lambda obligatoire qui définit l'action à effectuer lorsque l'utilisateur clique sur l'élément de 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 du texte dans l'élément de rail. Facultatif.
• icon : affiche une icône dans l'élément de rail. Facultatif.

Exemple : Navigation basée sur un rail

L'extrait suivant implémente un rail de navigation pour permettre aux utilisateurs de naviguer entre 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 à une 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 utilisateur clique sur un élément de rail, 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 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 précédent :

Ressources supplémentaires

• Material 3 – Rail de navigation
• Navigation avec Compose