Barra di navigazione

La barra di navigazione consente agli utenti di passare da una destinazione all'altra in un'app. Dovresti utilizzare le barre di navigazione per:

  • Da tre a cinque destinazioni di pari importanza
  • Dimensioni della finestra compatte
  • Destinazioni coerenti nelle schermate dell'app
Una barra di navigazione con 4 destinazioni. Ogni destinazione ha un nome segnaposto chiamato "Etichetta". La destinazione selezionata viene visualizzata con un'icona a forma di cerchio, mentre le altre destinazioni sono rappresentate da triangoli.
Figura 1. Una barra di navigazione con 4 destinazioni.

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

Piattaforma API

Utilizza i composabili NavigationBar e NavigationBarItem per implementare la logica di cambio di destinazione. Ogni NavigationBarItem rappresenta una singola destinazione.

NavigationBarItem include i seguenti parametri chiave:

  • selected: determina se l'elemento corrente è evidenziato visivamente.
  • onClick(): definisce l'azione da eseguire quando l'utente fa clic sull'elemento. La logica per la gestione degli eventi di navigazione, l'aggiornamento dello stato dell'elemento selezionato o il caricamento dei contenuti corrispondenti appartiene a questo punto.
  • label: visualizza il testo all'interno dell'elemento. Facoltativo.
  • icon: mostra un'icona all'interno dell'elemento. Facoltativo.

Esempio: barra di navigazione in basso

Il seguente snippet implementa una barra di navigazione in basso con elementi che consentono agli utenti di spostarsi tra le diverse schermate di un'app:

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

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}

Punti chiave

  • NavigationBar mostra una raccolta di elementi, ognuno dei quali corrisponde 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 selezionato.
    • startDestination.ordinal ottiene l'indice numerico (posizione) della voce enum Destination.SONGS.
  • Quando si fa clic su un elemento, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La funzione lambda onClick di NavigationBarItem aggiorna lo stato di selectedDestination per evidenziare visivamente l'elemento selezionato.
  • La logica di navigazione chiama il componibile AppNavHost, passando navController e startDestination, per visualizzare i contenuti effettivi della schermata selezionata.

Risultato

L'immagine seguente mostra la barra di navigazione risultante dallo snippet precedente:

Una schermata dell'app con tre destinazioni elencate orizzontalmente in una barra di navigazione in basso: Brani, Album e Playlist. Ogni destinazione è associata a un'icona pertinente (ad es. una nota musicale per "Brani").
Figura 2. Una barra di navigazione che contiene 3 destinazioni con icone associate: Brani, Album e Playlist.

Risorse aggiuntive