Il componente menu a scomparsa è un menu scorrevole che consente agli utenti di accedere a varie sezioni dell'app. Gli utenti possono attivarlo scorrendo lateralmente o toccando un'icona del menu.
Considera questi tre casi d'uso per l'implementazione di un riquadro di navigazione:
- Organizzazione dei contenuti:consenti agli utenti di passare da una categoria all'altra, ad esempio nelle app di notizie o di blogging.
- Gestione dell'account:fornisce link rapidi alle impostazioni dell'account e alle sezioni del profilo nelle app con account utente.
- Rilevamento delle funzionalità:organizza più funzionalità e impostazioni in un unico menu per facilitare la loro scoperta e l'accesso da parte degli utenti in app complesse.
In Material Design esistono due tipi di riquadri di navigazione:
- Standard:condividi lo spazio all'interno di uno schermo con altri contenuti.
- Modale:viene visualizzato sopra altri contenuti all'interno di una schermata.
Esempio
Puoi utilizzare il composable ModalNavigationDrawer
per implementare un riquadro di navigazione.
Utilizza lo slot drawerContent
per fornire un ModalDrawerSheet
e fornire
i contenuti del riquadro, come nell'esempio seguente:
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
accetta una serie di parametri aggiuntivi per i riquadri. Ad esempio, puoi attivare o disattivare la risposta del riquadro a scorrimento ai trascinamenti con il parametro gesturesEnabled
, come nell'esempio seguente:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Controllare il comportamento
Per controllare l'apertura e la chiusura del riquadro a scomparsa, utilizza DrawerState
. Devi
trasmettere un DrawerState
a ModalNavigationDrawer
utilizzando il parametro drawerState
.
DrawerState
fornisce l'accesso alle funzioni open
e close
, nonché alle proprietà relative allo stato corrente del riquadro. Queste funzioni di sospensione richiedono un CoroutineScope
, che puoi creare utilizzando rememberCoroutineScope
. Puoi anche chiamare le funzioni di sospensione in risposta agli eventi dell'interfaccia utente.
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 } }
Creare gruppi all'interno di un riquadro di navigazione
Il seguente snippet mostra come creare un riquadro di navigazione dettagliato con sezioni e separatori:
@Composable fun DetailedDrawerExample( content: @Composable (PaddingValues) -> Unit ) { val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) val scope = rememberCoroutineScope() ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Column( modifier = Modifier.padding(horizontal = 16.dp) .verticalScroll(rememberScrollState()) ) { Spacer(Modifier.height(12.dp)) Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge) HorizontalDivider() Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium) NavigationDrawerItem( label = { Text("Item 1") }, selected = false, onClick = { /* Handle click */ } ) NavigationDrawerItem( label = { Text("Item 2") }, selected = false, onClick = { /* Handle click */ } ) HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp)) Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium) NavigationDrawerItem( label = { Text("Settings") }, selected = false, icon = { Icon(Icons.Outlined.Settings, contentDescription = null) }, badge = { Text("20") }, // Placeholder onClick = { /* Handle click */ } ) NavigationDrawerItem( label = { Text("Help and feedback") }, selected = false, icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) }, onClick = { /* Handle click */ }, ) Spacer(Modifier.height(12.dp)) } } }, drawerState = drawerState ) { Scaffold( topBar = { TopAppBar( title = { Text("Navigation Drawer Example") }, navigationIcon = { IconButton(onClick = { scope.launch { if (drawerState.isClosed) { drawerState.open() } else { drawerState.close() } } }) { Icon(Icons.Default.Menu, contentDescription = "Menu") } } ) } ) { innerPadding -> content(innerPadding) } } }
Punti chiave del codice
- Compila
drawerContent
con unColumn
contenente sezioni, separatori e elementi di navigazione. ModalDrawerSheet
fornisce lo stile Material Design per il riquadro.HorizontalDivider
separa le sezioni all'interno del riquadro.ModalNavigationDrawer
crea il riquadro.drawerContent
definisce i contenuti del riquadro.- All'interno di
ModalDrawerSheet
, unColumn
dispone gli elementi del riquadro verticalmente. - I composabili
NavigationDrawerItem
rappresentano i singoli elementi del riquadro. Scaffold
fornisce la struttura di base della schermata, incluso ilTopAppBar
.- Il
navigationIcon
inTopAppBar
controlla lo stato di apertura e chiusura del riquadro.
Risultato
L'immagine seguente mostra come appare il riquadro quando viene aperto, con sezioni e voci visualizzate:
Risorse aggiuntive
- Material Design: riquadro di navigazione a scomparsa