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

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

Piattaforma API

Utilizza il componibile NavigationRail con NavigationRailItem per implementare una rotaia nella tua applicazione. NavigationRailItem rappresenta un singolo elemento della guida nella colonna della guida.

NavigationRailItem include i seguenti parametri chiave:

• selected: determina se l'elemento della guida 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 guida. 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:

@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:

Risorse aggiuntive

• Material 3 - Barra di navigazione
• Navigazione con Scrivi