Riquadro di navigazione a scomparsa

Il componente riquadro di navigazione è un menu a scorrimento che consente agli utenti di navigare tra le varie sezioni dell'app. Gli utenti possono attivarlo scorrendo dal lato o toccando un'icona del menu.

Prendi in considerazione questi tre casi d'uso per l'implementazione di un riquadro di navigazione a scomparsa:

  • Organizzazione dei contenuti: consente 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 degli utenti nelle app complesse.

In Material Design esistono due tipi di riquadri di navigazione a scomparsa:

  • Standard: condivide lo spazio all'interno di una schermata con altri contenuti.
  • Modale: viene visualizzato sopra gli altri contenuti all'interno di una schermata.
Esempio di un riquadro di navigazione a scomparsa Material Design 3 in modalità chiara e modalità Buio.
Figura 1. Un esempio di riquadro di navigazione a scomparsa.

Esempio

Puoi utilizzare il ModalNavigationDrawer componibile per implementare un riquadro di navigazione a scomparsa.

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 aggiuntivi del riquadro. Ad esempio, puoi attivare o disattivare la risposta del riquadro a scomparsa ai 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 la modalità di apertura e chiusura del riquadro a scomparsa, utilizza DrawerState. Devi passare un DrawerState a ModalNavigationDrawer utilizzando il parametro drawerState.

DrawerState fornisce l'accesso alle funzioni open e close, nonché alle proprietà correlate allo stato attuale del riquadro a scomparsa. 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 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

Creare gruppi all'interno di un riquadro di navigazione a scomparsa

Il seguente snippet mostra come creare un riquadro di navigazione a scomparsa dettagliato, con sezioni e divisori:

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

Punti chiave sul codice

  • Popola drawerContent con una Column contenente sezioni, divisori ed elementi di navigazione.
  • ModalDrawerSheet fornisce lo stile Material Design per il riquadro a scomparsa.
  • HorizontalDivider separa le sezioni all'interno del riquadro a scomparsa.
  • ModalNavigationDrawer crea il riquadro a scomparsa.
  • drawerContent definisce i contenuti del riquadro a scomparsa.
  • All'interno di ModalDrawerSheet, una Column dispone gli elementi del riquadro a scomparsa verticalmente.
  • NavigationDrawerItem componibili rappresentano i singoli elementi del riquadro a scomparsa.
  • Il Scaffold fornisce la struttura di base della schermata, incluso il TopAppBar.
  • navigationIcon in TopAppBar controlla lo stato di apertura e chiusura del riquadro.

Risultato

La seguente immagine mostra l'aspetto del riquadro a scomparsa quando viene aperto, con le sezioni e gli elementi visualizzati:

Un riquadro di navigazione a scomparsa dettagliato con due sezioni, ognuna con più elementi ed icone etichettati.
Figura 2. Un riquadro di navigazione a scomparsa aperto con due gruppi nidificati.

Risorse aggiuntive