TabRow e pagine scorrevoli
Aggiunga schede orizzontali con paginazione.
TabRow e pagine scorrevoli è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Conoscere TabRow
Mentre NavigationBar si trova in basso, TabRow dispone una riga di schede in alto, perfetta per passare da una vista correlata all'altra nella stessa schermata. 🗂️
TabRow e NavigationBar a confronto
Usi TabRow per sezioni all'interno della schermata, come Post e Informazioni; usi NavigationBar per le destinazioni principali dell'app. Funzioni diverse, barre diverse.
Aggiungere schede al suo interno
Una TabRow accetta un selectedTabIndex e una lambda content in cui emettere una Tab per ogni sezione.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Ogni Tab è selezionabile
Ogni Tab ha il proprio flag selected e onClick, oltre a un testo o a un'icona, proprio come un NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Rendere le pagine scorrevoli
Per scorrere tra le pagine, abbini le schede a un HorizontalPager, che mostra una pagina a larghezza intera alla volta.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }Uno stato, due viste
Il punto chiave è condividere pagerState. TabRow legge la pagina corrente e il pager aggiorna quella pagina quando l'utente scorre.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Il tocco deve scorrere il pager
Quando si tocca una scheda, chiami animateScrollToPage, così il pager scorre fluidamente fino alla pagina corrispondente.
scope.launch {
pagerState.animateScrollToPage(i)
}Eseguirla in uno scope
Poiché animateScrollToPage è una chiamata suspend, la avvii da un rememberCoroutineScope all'interno del suo onClick.
val scope = rememberCoroutineScope()Schede scorrevoli
Ha molte schede? Usi ScrollableTabRow, così scorrono orizzontalmente invece di essere compresse nella larghezza della schermata.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Personalizzare l'indicatore
La sottolineatura che si sposta è lo slot indicator. Può cambiarne il colore o le dimensioni per abbinarla al tema e al brand.
indicator = { tabPositions -> /* custom underline */ }Il modello pager più schede
La combinazione di TabRow e HorizontalPager su uno stato condiviso è il modello Compose standard per schermate a schede scorrevoli.
Controllo rapido
Ha creato pagine a schede scorrevoli. Controllo finale!
Riepilogo
Ha imparato a usare TabRow con HorizontalPager: pagerState condiviso li collega, animateScrollToPage gestisce i tocchi e ScrollableTabRow permette di usare molte schede. Corso completato! 🚀
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «TabRow e pagine scorrevoli» è gratuita?
Sì — il testo completo di «TabRow e pagine scorrevoli» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «TabRow e pagine scorrevoli»?
Aggiunga schede orizzontali con paginazione. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «TabRow e pagine scorrevoli»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- NavigationBar con più schede
- Evidenziare la route selezionata
- Preservare lo stato delle schede al cambio
- TabRow e pagine scorrevoli