Panneau de navigation

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

Examinons ces trois cas d'utilisation pour implémenter un panneau de navigation:

• Organisation du contenu:permettez aux utilisateurs de basculer entre différentes catégories, par exemple dans les applications d'actualités ou de blog.
• Gestion des comptes:fournissez des liens rapides vers les paramètres de compte et les sections de profils dans les applications avec des comptes utilisateur.
• Découverte de fonctionnalités:organisez plusieurs fonctionnalités et paramètres dans un même menu pour faciliter la découverte des utilisateurs et leur accès dans des applications complexes.

Il existe deux types de panneaux de navigation dans Material Design:

• Standard:partagez l'espace d'un écran avec d'autres contenus.
• Mode 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 le 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. Par exemple, vous pouvez activer ou non la réaction du panneau aux déplacements avec le paramètre gesturesEnabled, comme dans l'exemple suivant:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Comportement des commandes

Pour contrôler la façon dont le panneau s'ouvre et se ferme, utilisez DrawerState. Vous devez transmettre un DrawerState à ModalNavigationDrawer à l'aide du paramètre drawerState.

DrawerState permet d'accéder aux fonctions open et close, ainsi qu'aux propriétés liées à l'état actuel du panneau. Ces fonctions de suspension nécessitent un CoroutineScope, que vous pouvez instancier à l'aide de rememberCoroutineScope. Vous pouvez également appeler les fonctions de suspension en réponse à des événements d'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