Barra di navigazione

Le barre forniscono l'accesso alle destinazioni nelle app eseguite su dispositivi con schermi grandi. Devi utilizzare le barre di navigazione per:

• Destinazioni di primo livello che devono essere accessibili ovunque in un'app
• Da tre a sette destinazioni principali
• Layout per tablet o computer

Figura 1. Una barra di navigazione con quattro destinazioni e un pulsante di azione mobile.

Questa pagina mostra come visualizzare le guide nell'app con schermate correlate e navigazione di base.

Superficie API

Utilizza il composable NavigationRail con NavigationRailItem per implementare una barra nella tua applicazione. NavigationRailItem rappresenta un singolo elemento della sezione nella colonna della sezione.

NavigationRailItem include i seguenti parametri chiave:

• selected: determina se l'elemento della sezione corrente è evidenziato visivamente.
• onClick(): una funzione Lambda obbligatoria che definisce l'azione da eseguire quando l'utente fa clic sull'elemento della guida. In genere qui gestisci gli eventi di navigazione, aggiorni lo stato dell'elemento della barra selezionato o carichi i contenuti corrispondenti.
• label: Visualizza il testo all'interno dell'elemento della guida. Facoltativo.
• icon: mostra un'icona all'interno dell'elemento della barra. Facoltativo.

Esempio: navigazione basata su binari

Il seguente snippet implementa una barra di spostamento in modo che gli utenti possano spostarsi tra le diverse schermate di un'app:

Nota: il codice sorgente completo include il codice che stabilisce la struttura di navigazione di base per l'esempio seguente.

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Punti chiave

• NavigationRail mostra una colonna verticale di elementi della guida, con ogni elemento corrispondente a un Destination.
• val navController = rememberNavController() crea e memorizza un'istanza di NavHostController, che gestisce la navigazione all'interno di un NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gestisce lo stato dell'elemento della barra selezionato.
  • startDestination.ordinal restituisce l'indice numerico (posizione) della voce di enumerazione Destination.SONGS.
• Quando si fa clic su un elemento della barra, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
• La lambda onClick di NavigationRailItem aggiorna lo stato di selectedDestination per evidenziare visivamente l'elemento della rotaia su cui è stato fatto clic.
• Chiama il composable AppNavHost, passando navController e startDestination, per visualizzare i contenuti effettivi della schermata selezionata.

Risultato

L'immagine seguente mostra il risultato dello snippet precedente:

Figura 2. Una barra di navigazione contenente tre destinazioni con le icone associate: Brani, Album e Playlist.

Risorse aggiuntive

• Material 3 - Barra di navigazione
• Navigazione con Scrivi