Schede

Le schede ti consentono di organizzare gruppi di contenuti correlati. Esistono due tipi di schede:

  • Schede principali: posizionate nella parte superiore del riquadro dei contenuti sotto una barra delle app in alto. Vengono visualizzate le destinazioni dei contenuti principali e devono essere utilizzate quando è necessario un solo set di schede.
  • Schede secondarie: utilizzate all'interno di un'area di contenuti per separare ulteriormente i contenuti correlati e stabilire la gerarchia. Sono necessari quando una schermata richiede più di un livello di schede.
Vengono mostrate tre schede principali con le icone associate (Voli, Viaggi ed Esplora). Vengono visualizzate due schede secondarie (Panoramica, Specifiche) senza icone associate.
Figura 1. Schede principali (1) e secondarie (2).

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

API surface

Utilizza i composabili Tab, PrimaryTabRow e SecondaryTabRow per implementare le schede. Il composable Tab rappresenta una singola scheda all'interno della riga e in genere viene utilizzato all'interno di un PrimaryTabRow (per le schede degli indicatori principali) o di un SecondaryTabRow (per le schede degli indicatori secondari).

Tab include i seguenti parametri chiave:

  • selected: determina se la scheda corrente è evidenziata visivamente.
  • onClick(): una funzione lambda obbligatoria che definisce l'azione da eseguire quando l'utente fa clic sulla scheda. In genere, è qui che gestisci gli eventi di navigazione, aggiorni lo stato della scheda selezionata o carichi i contenuti corrispondenti.
  • text: mostra il testo all'interno della scheda. Facoltativo.
  • icon: mostra un'icona all'interno della scheda. Facoltativo.
  • enabled: consente di stabilire se la scheda è attiva e se è possibile interagire con essa. Se impostato su false, la scheda viene visualizzata in uno stato disattivato e non risponde ai clic.

Esempio: navigazione basata su schede

Il seguente snippet implementa una barra di navigazione in alto con schede per spostarsi tra le diverse schermate di un'app:

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Punti chiave

  • PrimaryTabRow mostra una riga orizzontale di schede, ciascuna 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 della scheda selezionata al momento.
    • startDestination.ordinal restituisce l'indice numerico (posizione) della voce dell'enum Destination.SONGS.
  • Quando si fa clic su una scheda, viene chiamato navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La lambda onClick di Tab aggiorna lo stato selectedDestination per evidenziare visivamente la scheda 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:

Tre schede disposte orizzontalmente nella parte superiore della schermata dell'app. Le schede sono Brani, Album e Playlist, con la scheda Brani selezionata e sottolineata.
Figura 2. 3 schede (Brani, Album e Playlist) disposte orizzontalmente.

Risorse aggiuntive