Barra di navigazione

Le barre laterali forniscono l'accesso alle destinazioni nelle app eseguite su dispositivi con schermi grandi. Dovresti 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

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

Piattaforma API

Utilizza il componibile NavigationRail con NavigationRailItem per implementare una barra nell'applicazione. NavigationRailItem rappresenta un singolo elemento della colonna della griglia.

NavigationRailItem include i seguenti parametri chiave:

• selected: determina se l'elemento della barra laterale corrente è evidenziato visivamente.
• onClick(): una funzione lambda obbligatoria che definisce l'azione da eseguire quando l'utente fa clic sull'elemento della barra. In genere, è qui che 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 barra. Facoltativo.
• icon: visualizza un'icona all'interno dell'elemento della barra. Facoltativo.

Esempio: navigazione basata su barre

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

@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 barra laterale, 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 laterale selezionato.
  • startDestination.ordinal ottiene l'indice numerico (posizione) della voce enum Destination.SONGS.
• Quando si fa clic su un elemento della barra, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
• La funzione lambda onClick di NavigationRailItem aggiorna lo stato di selectedDestination per evidenziare visivamente l'elemento della barra di navigazione selezionato.
• 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:

Risorse aggiuntive

• Material 3 - Barra di navigazione
• Navigazione con Compose