Barra di navigazione

Le barre di spostamento consentono di accedere alle destinazioni nelle app che vengono eseguite su dispositivi con schermi di grandi dimensioni. Dovresti utilizzare le barre di spostamento per:

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

Questa pagina mostra come visualizzare le barre di spostamento nella tua app con schermate correlate e navigazione di base.

Piattaforma API

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

NavigationRailItem include i seguenti parametri chiave:

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

Esempio: navigazione basata sulla barra di spostamento

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 visualizza una colonna verticale di elementi della barra di spostamento, con ogni elemento corrispondente a una 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 di spostamento attualmente selezionato.
  • startDestination.ordinal recupera l'indice numerico (posizione) della voce dell'enumerazione Destination.SONGS.
• Quando si fa clic su un elemento della barra di spostamento, viene chiamata navController.navigate(route = destination.route) per passare alla schermata corrispondente.
• La funzione lambda onClick di NavigationRailItem aggiorna lo stato selectedDestination per evidenziare visivamente l'elemento della barra di spostamento 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 spostamento
• Navigazione con Compose