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 il rilevamento 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 del riquadro aggiuntivi. 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
}
}