TabRow e Páginas Deslizáveis
Adicione abas horizontais com paginação.
TabRow e Páginas Deslizáveis é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Meet TabRow
While NavigationBar sits at the bottom, TabRow places a row of tabs at the top, perfect for switching between related views on one screen. 🗂️
TabRow vs NavigationBar
Use TabRow for in-screen sections like Posts and About; use NavigationBar for whole app destinations. Different jobs, different bars.
Add Tabs Inside It
A TabRow takes a selectedTabIndex and a content lambda where you emit one Tab per section.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Each Tab Is Selectable
Each Tab has its own selected flag and onClick, plus text or an icon, much like a NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Make Pages Swipeable
To swipe between pages, pair the tabs with a HorizontalPager, which shows one full-width page at a time.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }One State, Two Views
The trick is sharing pagerState. The TabRow reads its current page, and the pager drives that page as the user swipes.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Tap Should Scroll the Pager
On a tab tap, call animateScrollToPage so tapping a tab smoothly slides the pager to that page.
scope.launch {
pagerState.animateScrollToPage(i)
}Run It in a Scope
Because animateScrollToPage is a suspend call, launch it from a rememberCoroutineScope inside your onClick.
val scope = rememberCoroutineScope()Scrollable Tabs
Got many tabs? Use ScrollableTabRow so they scroll horizontally instead of cramming into the screen width.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Style the Indicator
The moving underline is the indicator slot. You can recolor or resize it to match your theme and brand.
indicator = { tabPositions -> /* custom underline */ }Pager Plus Tabs Pattern
Combining TabRow and HorizontalPager over one shared state is the standard Compose pattern for swipeable, tabbed screens.
Quick Check
You built swipeable tabbed pages. Final check!
Recap
You mastered TabRow with HorizontalPager: shared pagerState links them, animateScrollToPage handles taps, and ScrollableTabRow fits many tabs. Course done! 🚀
Perguntas Frequentes
A aula “TabRow e Páginas Deslizáveis” é grátis?
Sim — o texto completo de “TabRow e Páginas Deslizáveis” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “TabRow e Páginas Deslizáveis”?
Adicione abas horizontais com paginação. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “TabRow e Páginas Deslizáveis”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- NavigationBar com Várias Abas
- Destacando a Rota Selecionada
- Preservando o Estado das Abas ao Alternar
- TabRow e Páginas Deslizáveis