Le composant Navigation drawer (Volet de navigation) est un menu coulissant qui permet aux utilisateurs d'accéder à différentes sections de votre application. Ils peuvent l'activer en balayant l'écran depuis le côté ou en appuyant sur une icône de menu.
Voici trois cas d'utilisation d'un panneau de navigation :
- Organisation du contenu:permettez aux utilisateurs de passer d'un contenu à l'autre. par exemple dans les applications d'actualités ou de blog.
- Gestion du compte:fournissez des liens rapides vers les paramètres du compte et le profil. dans les applications avec des comptes utilisateur.
- Découverte de fonctionnalités:regroupez plusieurs fonctionnalités et paramètres au sein d'un même pour faciliter la découverte et l'accès des utilisateurs dans les applications complexes.
Dans Material Design, il existe deux types de panneaux de navigation :
- Standard:permet de partager l'espace d'un écran avec d'autres contenus.
- Modal:s'affiche au-dessus des autres contenus sur l'écran.
Exemple
Vous pouvez utiliser le composable ModalNavigationDrawer
pour implémenter un
panneau de navigation.
Utilisez l'emplacement drawerContent
pour fournir un ModalDrawerSheet
et fournir
contenu du panneau, comme dans l'exemple suivant:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { // Screen content }
ModalNavigationDrawer
accepte un certain nombre de paramètres de panneau supplémentaires. Pour
Par exemple, vous pouvez activer ou désactiver la réaction du panneau aux glisser-déposer
gesturesEnabled
comme dans l'exemple suivant:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Contrôler le comportement
Pour contrôler l'ouverture et la fermeture du panneau, utilisez DrawerState
. Vous devez transmettre un DrawerState
à ModalNavigationDrawer
à l'aide du paramètre drawerState
.
DrawerState
permet d'accéder aux fonctions open
et close
, en tant que
ainsi que les propriétés liées à l'état actuel du panneau. Ces fonctions de suspension nécessitent de définir leur CoroutineScope
, que vous pouvez instancier à l'aide de rememberCoroutineScope
. Vous pouvez également appeler les fonctions de suspension dans
en réponse aux événements de l'interface utilisateur.
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) val scope = rememberCoroutineScope() ModalNavigationDrawer( drawerState = drawerState, drawerContent = { ModalDrawerSheet { /* Drawer content */ } }, ) { Scaffold( floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show drawer") }, icon = { Icon(Icons.Filled.Add, contentDescription = "") }, onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } } ) } ) { contentPadding -> // Screen content } }