Il componente del riquadro di navigazione a scomparsa è un menu a scorrimento che consente agli utenti di passare a varie sezioni dell'app. Gli utenti possono attivarlo scorrendo da un lato o toccando l'icona di un menu.
Considera questi tre casi d'uso per l'implementazione di un riquadro di navigazione a scomparsa:
- 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: fornisci 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 l'individuazione e l'accesso da parte degli utenti in app complesse.
In Material Design sono disponibili due tipi di riquadri di navigazione a scomparsa:
- Standard:consente di condividere lo spazio all'interno dello schermo con altri contenuti.
- Modal: viene visualizzata sopra gli altri contenuti all'interno dello schermo.
Esempio
Puoi utilizzare il componibile ModalNavigationDrawer per implementare un riquadro di navigazione a scomparsa.
Utilizza lo slot drawerContent per fornire un ModalDrawerSheet e i contenuti del riquadro a scomparsa, come nell'esempio seguente:
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
}
ModalNavigationDrawer accetta una serie di parametri aggiuntivi del riquadro a scomparsa. Ad
esempio, puoi scegliere se il riquadro a scomparsa deve rispondere o meno ai trascinamenti con il
parametro gesturesEnabled come nell'esempio seguente:
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
Comportamento del controllo
Per controllare la modalità di apertura e chiusura del riquadro a scomparsa, utilizza DrawerState. Devi passare un valore DrawerState a ModalNavigationDrawer utilizzando il parametro drawerState.
DrawerState consente di accedere alle funzioni open e close, nonché alle proprietà correlate allo stato attuale del riquadro a scomparsa. Queste funzioni di sospensione richiedono un valore CoroutineScope, di cui puoi creare un'istanza utilizzando rememberCoroutineScope. Puoi anche richiamare 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
}
}