Tiroir de navigation

Le code de cette recette est disponible ici.

Navigation d'abord

On doit d'abord mettre en place la navigation tel que décrit dans la recette Navigation avec JetPack Compose:

• Ajouter la dépendance dans le fichier build.gradle.kts
• Définir les routes dans le fichier MainActivity.kt
• Utiliser les routes dans le setContent de l'activité

ModalNavigationDrawer

La fonction composable ModalNavigationDrawer permet de créer un contenant:

• intéragit avec un drawerState qui permet d'ouvrir / fermer le tiroir
• prend un drawerContent qui sera l'objet graphique qui disparaît à gauche
• on va passer le navController au tiroir pour permettre de naviguer sur les clicks
• le contenu du ModalNavigationDrawer sera ce qui s'affiche à l'écran

Chargement...

Hamburger

Le hamburger est l'icône qui permet d'ouvrir le tiroir de navigation (trois barres horizontales, comme le pain, le steak et le pain d'un hamburger). Il est généralement placé dans la barre d'action en haut de l'écran.

• la convention veut qu'on mette le hamburger en haut à gauche dans le topbar
• IconButton nous permet d'avoir un bouton avec l'icône de hamburger
• drawerState permet d'ouvrir le tiroir avec drawerState.open()

Chargement...

Le tiroir

Le tiroir va être une fonction composable qu'on peut réutiliser dans plusieurs écrans.

La fonction va être ici ModalDrawerSheet avec des NavigationDrawerItem dedans:

• prend en paramètre le navController pour déclencher les navigations
• la fonction fermerTiroir permet d'intéragir avec le drawerState défini un niveau plus haut
• ModalDrawerSheet : permet de créer un tiroir qui peut être ouvert et fermé
• NavigationDrawerItem : permet de créer un item de menu dans le tiroir

Chargement...

Explorer le code

On t'encourage à explorer le code de l'application pour voir comment tous ces éléments intéragissent.

Ajoute des points d'arrêt dans le code pour voir comment la navigation fonctionne en temps réel.

Le code de cette recette est disponible ici.