TabRow и страницы с перелистыванием
Добавьте горизонтальные вкладки с перелистыванием.
«TabRow и страницы с перелистыванием» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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! 🚀
Часто задаваемые вопросы
Урок «TabRow и страницы с перелистыванием» бесплатный?
Да — полный текст урока «TabRow и страницы с перелистыванием» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «TabRow и страницы с перелистыванием»?
Добавьте горизонтальные вкладки с перелистыванием. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «TabRow и страницы с перелистыванием»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- NavigationBar с несколькими вкладками
- Выделение выбранного маршрута
- Сохранение состояния вкладок при переключении
- TabRow и страницы с перелистыванием