Riquadro di navigazione a scomparsa

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:

• 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 il rilevamento e l'accesso da parte degli utenti in app complesse.

In Material Design sono disponibili due tipi di riquadri di navigazione a scomparsa:

• 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
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer accetta una serie di parametri del riquadro aggiuntivi. Ad esempio, puoi attivare o disattivare la risposta del riquadro a trascinamenti con il parametro gesturesEnabled, come nell'esempio seguente:

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

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
    }
}
MaterialLayoutSnippets.kt