TabRow 与可滑动页面
添加支持分页的水平标签页。
TabRow 与可滑动页面 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
认识 TabRow
NavigationBar 位于底部，而 TabRow 会在顶部放置一排标签页，非常适合在同一屏幕上的相关视图之间切换。🗂️
TabRow 与 NavigationBar
对于 Posts 和 About 这类屏幕内分区，请使用 TabRow；对于整个应用的目标页面，请使用 NavigationBar。用途不同，导航栏也不同。
在其中添加标签页
TabRow 接收 selectedTabIndex 和一个内容 lambda，您可以在其中为每个分区生成一个 Tab。
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}每个标签页都可选择
每个 Tab 都有自己的 selected 标志和 onClick，还可以包含文本或图标，与 NavigationBarItem 十分类似。
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)让页面支持滑动
要在页面之间滑动，请将标签页与 HorizontalPager 配对，它会一次显示一个全宽页面。
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }一个状态，两种视图
关键在于共享 pagerState。TabRow 读取当前页面，而分页器则在用户滑动时驱动当前页面。
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }点击应滚动分页器
点击标签页时，调用 animateScrollToPage，让分页器平滑滑动到对应页面。
scope.launch {
pagerState.animateScrollToPage(i)
}在作用域中运行
由于 animateScrollToPage 是挂起调用，请在 onClick 中通过 rememberCoroutineScope 启动它。
val scope = rememberCoroutineScope()可滚动的标签页
标签页很多吗？使用 ScrollableTabRow，让它们水平滚动，而不是挤在屏幕宽度内。
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }设置指示器样式
移动的下划线就是 indicator 插槽。您可以重新设置它的颜色或尺寸，使其符合您的主题和品牌风格。
indicator = { tabPositions -> /* custom underline */ }分页器加标签页模式
在一个共享状态上组合 TabRow 和 HorizontalPager，是 Compose 中实现可滑动标签页屏幕的标准模式。
快速检查
您已经构建了可滑动的标签页页面。最后检查一下！
回顾
您已经掌握了 TabRow 与 HorizontalPager：共享的 pagerState 将二者连接起来，animateScrollToPage 处理点击操作，而 ScrollableTabRow 可以容纳许多标签页。课程完成！🚀
用 AI 导师学习 Kotlin — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「TabRow 与可滑动页面」课时是免费的吗？
是的 — 「TabRow 与可滑动页面」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「TabRow 与可滑动页面」这节课中我会学到什么？
添加支持分页的水平标签页。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「TabRow 与可滑动页面」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 带多个标签页的 NavigationBar
- 突出显示选中的路由
- 切换时保留标签页状态
- TabRow 与可滑动页面