使用 LazyRow 构建轮播
构建水平滚动的内容架。
使用 LazyRow 构建轮播 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
横向滚动
有时内容应该左右滑动，例如电影架。此时请使用LazyRow，它是 LazyColumn 的水平版本。↔️
为什么不用普通行布局？
普通行布局会立即组合所有子项，而且无法滚动。LazyRow会水平滚动，并且只构建可视范围内的项目。
基本 LazyRow
向LazyRow提供项目的方式与列布局类似，但这些项目会并排排列，而不是上下堆叠。
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}让卡片彼此分开
轮播卡片需要间隙。使用horizontalArrangement配合 spacedBy，为每张卡片设置一致的间距。
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }两端的内边距
添加contentPadding，让第一张卡片从边缘略微露出，而不是紧贴边缘并被裁切。
contentPadding = PaddingValues(horizontal = 16.dp)设置每张卡片的大小
为每个轮播项目设置固定的宽度，这样用户滑动浏览时，卡片就能保持统一。
MovieCard(movie, Modifier.width(140.dp))露出下一张卡片的一部分
让下一张卡片露出一部分，以提示用户后面还有更多内容。相对于屏幕，将卡片的宽度设置得稍小一些即可实现良好效果。
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))轮播上方的页眉
轮播通常位于标题下方。请将LazyRow放在列布局中，并在它上方添加 Text 页眉。
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}在 LazyColumn 中嵌套
主屏幕通常会堆叠多个轮播。将多个LazyRow行放入父级 LazyColumn 中，即可创建类似 Netflix 的信息流。
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}每个行布局都需要宽度
LazyColumn 中的 LazyRow 会自动填满可用宽度。只需确保父级为它提供一个有限的宽度作为测量依据即可。
何时使用 LazyRow
对于货架、筛选标签、故事气泡，以及任何适合横向滑动而不是向下滚动浏览的内容，请使用 LazyRow。
快速检查
想一想横向滚动。
回顾：轮播布局
您使用 LazyRow 构建了横向货架：并排排列的项目、间距、末尾内边距、固定宽度的卡片，以及在信息流中嵌套使用。🎬
用 AI 导师学习 Kotlin — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「使用 LazyRow 构建轮播」课时是免费的吗？
是的 — 「使用 LazyRow 构建轮播」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「使用 LazyRow 构建轮播」这节课中我会学到什么？
构建水平滚动的内容架。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 LazyRow 构建轮播」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- LazyVerticalGrid 画廊
- 使用 LazyRow 构建轮播
- 自适应与固定网格单元
- 滚动状态与编程式滚动