Barra di navigazione

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

  • Da tre a cinque destinazioni di pari importanza
  • Dimensioni delle finestre 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 vengono visualizzate come triangoli.
Figura 1. Una barra di navigazione con 4 destinazioni.

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

Piattaforma API

Utilizza i composable NavigationBar e NavigationBarItem per implementare la logica di cambio 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 questa sezione.
  • label: mostra 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 navigare 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))
    }
}
Navigation.kt

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 restituisce l'indice numerico (posizione) della voce di enumerazione Destination.SONGS.
  • Quando si fa clic su un elemento, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La lambda onClick di NavigationBarItem aggiorna lo stato di selectedDestination per evidenziare visivamente l'elemento su cui è stato fatto clic.
  • La logica di navigazione chiama il composable 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 ha un'icona pertinente associata (ad es. una nota musicale per "Canzoni").
Figura 2. Una barra di navigazione che contiene tre destinazioni con icone associate: Brani, Album e Playlist.

Risorse aggiuntive