Panneau de navigation

Le composant de panneau de navigation est un menu coulissant qui permet aux utilisateurs de naviguer à différentes sections de votre application. Les utilisateurs peuvent l'activer en balayant l'écran sur le côté. ou en appuyant sur une icône de menu.

Voici trois cas d'utilisation pour implémenter 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'une même pour faciliter la découverte et l'accès des utilisateurs à des 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))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

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
}
MaterialLayoutSnippets.kt

Comportement des contrôles

Pour contrôler la manière dont le panneau s'ouvre et se ferme, utilisez DrawerState. Vous devez transmettez un DrawerState à ModalNavigationDrawer à l'aide de 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 suspensions les fonctions nécessitent un 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
    }
}
MaterialLayoutSnippets.kt