Riquadro di navigazione a scomparsa

Il componente riquadro Navigazione a scomparsa è un menu a scorrimento che consente agli utenti di passare alle varie sezioni della tua 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 a scomparsa:

• Organizzazione dei contenuti: consenti agli utenti di passare da una categoria all'altra, ad esempio nelle app di notizie o di blog.
• Gestione 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 la scoperta delle funzionalità da parte degli utenti e l'accesso nelle app complesse.

In Material Design esistono due tipi di cassetti di navigazione:

• Standard:condividi lo spazio all'interno di uno schermo con altri contenuti.
• Modale: viene visualizzata sopra gli altri contenuti visualizzati sullo schermo.

Esempio

Puoi utilizzare l'elemento componibile ModalNavigationDrawer per implementare un riquadro di navigazione a scomparsa.

Utilizza lo slot drawerContent per fornire un elemento ModalDrawerSheet e fornire 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
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer accetta una serie di parametri del riquadro a scomparsa aggiuntivi. Ad esempio, puoi scegliere se il riquadro a scomparsa deve rispondere o meno ai trascina con il parametro gesturesEnabled come nell'esempio seguente:

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

Comportamento del controllo

Per controllare la modalità di apertura e chiusura del riquadro a scomparsa, usa DrawerState. Devi passare un valore DrawerState a ModalNavigationDrawer utilizzando il parametro drawerState.

DrawerState consente di accedere alle funzioni open e close, nonché a proprietà relative allo stato del riquadro a scomparsa corrente. Queste funzioni di sospensione richiedono un CoroutineScope, che puoi creare un'istanza utilizzando rememberCoroutineScope. Puoi anche chiamare le funzioni di sospensione in risposta agli eventi della UI.

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