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 superiore dell'app. Mostrano le principali destinazioni dei contenuti 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 una gerarchia. Sono necessari quando una schermata richiede più di un livello di schede.

Questa pagina mostra come visualizzare le schede principali nella tua app con schermate correlate e navigazione di base.
Superficie API
Utilizza i composable Tab
, PrimaryTabRow
e SecondaryTabRow
per implementare le schede. Il componente componibile Tab
rappresenta una singola scheda all'interno della riga e viene in genere 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 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
: controlla se la scheda è abilitata e se è possibile interagire con essa. Se è impostato su false, la scheda viene visualizzata in stato disattivato e non risponde ai clic.
Esempio: navigazione basata su schede
Il seguente snippet implementa una barra di navigazione superiore 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) } }
Punti chiave
PrimaryTabRow
mostra una riga orizzontale di schede, ognuna delle quali corrisponde a unDestination
.val navController = rememberNavController()
crea e memorizza un'istanza diNavHostController
, che gestisce la navigazione all'interno di unNavHost
.var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }
gestisce lo stato della scheda selezionata.startDestination.ordinal
restituisce l'indice numerico (posizione) della voce di enumerazioneDestination.SONGS
.
- Quando fai clic su una scheda, le chiamate lambda
onClick
navController.navigate(route = destination.route)
ti reindirizzano alla schermata corrispondente. - La lambda
onClick
diTab
aggiorna lo stato diselectedDestination
per evidenziare visivamente la scheda selezionata. - Chiama il composable
AppNavHost
, passandonavController
estartDestination
, per visualizzare i contenuti effettivi della schermata selezionata.
Risultato
L'immagine seguente mostra il risultato dello snippet precedente:
.png?hl=it)