Riquadro di navigazione a scomparsa

Il componente del riquadro di navigazione a scomparsa è un menu a scorrimento che consente agli utenti di navigare in varie sezioni dell'app. Gli utenti possono attivarla scorrendo dal 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:consente agli utenti di passare da un'organizzazione all'altra. ad esempio in app di notizie o di blogging.
• Gestione dell'account:fornisci link rapidi alle impostazioni e al profilo dell'account. nelle app con account utente.
• Rilevamento delle funzionalità:organizza più funzionalità e impostazioni in un unico posto. per facilitare la scoperta da parte degli utenti e l'accesso 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 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 aggiuntivi del riquadro a scomparsa. Per Ad esempio, puoi stabilire se il riquadro a scomparsa risponde o meno ai trascinamenti con 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, utilizza DrawerState. Dovresti passa DrawerState a ModalNavigationDrawer utilizzando drawerState .

DrawerState dà accesso alle funzioni open e close, come nonché le proprietà relative allo stato corrente del riquadro a scomparsa. Queste regole di sospensione richiedono un valore CoroutineScope, di cui puoi creare un'istanza utilizzando rememberCoroutineScope Puoi anche richiamare le funzioni di sospensione la 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