Barra di navigazione

La barra di navigazione consente agli utenti di passare da una destinazione all'altra in un'app. Devi usare 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
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.

API surface

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

NavigationBarItem include i seguenti parametri chiave:

  • selected: determina se l'elemento corrente è evidenziato visivamente.
  • onClick(): una funzione lambda obbligatoria che definisce l'azione da eseguire quando l'utente fa clic sull'elemento. In genere, è qui che gestisci gli eventi di navigazione, aggiorni lo stato dell'elemento selezionato o carichi i contenuti corrispondenti.
  • 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, ciascuno 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 selezionato al momento.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gestisce lo stato dell'elemento attualmente selezionato.
    • startDestination.ordinal restituisce l'indice numerico (posizione) della voce dell'enum Destination.SONGS.
  • Quando viene fatto clic su un elemento, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La lambda onClick di NavigationBarItem aggiorna lo stato selectedDestination per evidenziare visivamente l'elemento 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 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. A ogni destinazione è associata un'icona pertinente (ad es. una nota musicale per "Brani").
Figura 2. Una barra di navigazione contenente tre destinazioni con icone associate: Brani, Album e Playlist.

Risorse aggiuntive