Barra di navigazione

I riquadri forniscono l'accesso alle destinazioni nelle app che vengono eseguite su dispositivi con schermi grandi. Ti consigliamo di utilizzare i riquadri 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
Una barra di navigazione verticale sul lato sinistro di una schermata con quattro destinazioni (Tutti i file, Recenti, Foto e Raccolta), ciascuna con un'icona associata, e un pulsante di azione mobile.
Figura 1. Una barra di navigazione con quattro destinazioni e un pulsante di azione mobile.

Questa pagina mostra come visualizzare i riquadri nella tua app con schermate correlate e navigazione di base.

API surface

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

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 sezione. In genere, in questo punto gestisci gli eventi di navigazione, aggiorni lo stato dell'elemento della sezione selezionato o carichi i contenuti corrispondenti.
  • label: mostra il testo all'interno dell'elemento della barra laterale. Facoltativo.
  • icon: mostra un'icona all'interno dell'elemento della sezione. Facoltativo.

Esempio: navigazione basata su ferrovie

Il seguente snippet implementa una barra di navigazione per consentire agli utenti di 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 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 sezione attualmente selezionato.
    • startDestination.ordinal restituisce l'indice numerico (posizione) della voce dell'enum Destination.SONGS.
  • Quando viene fatto clic su un elemento della barra laterale, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La lambda onClick di NavigationRailItem aggiorna lo stato selectedDestination per evidenziare visivamente l'elemento della barra 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:

Una barra di navigazione verticale con tre destinazioni con icone associate: Brani, Album e Playlist. Le icone indicano visivamente lo scopo di ciascun pulsante di navigazione nella barra laterale. A ogni destinazione è associata un'icona pertinente (ad es. una nota musicale per
Figura 2. Una barra di navigazione contenente tre destinazioni con le relative icone: Brani, Album e Playlist.

Risorse aggiuntive