可换行芯片的 FlowRow
从头构建真正的换行布局。
可换行芯片的 FlowRow 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
FlowRow 的作用
FlowRow 会从左到右放置子项，宽度不足时再换行。它非常适合标签和筛选条件。🏷️
从布局可组合函数开始
您已经知道要使用的工具：布局可组合函数。换行逻辑完全取决于您如何测量和放置子项。
Layout(content, modifier) { measurables, constraints ->
}以宽松方式测量子项
使用父项的 maxWidth 测量每个标签，但不设置最小值，这样标签会根据内容确定大小，而不是拉伸到全宽。
val placeables = measurables.map {
it.measure(constraints.copy(minWidth = 0))
}跟踪当前行宽度
遍历可放置对象，并持续记录行宽。每添加一个标签，行宽就增加该标签自身的宽度。
行溢出时换行
如果添加下一个标签会超过 maxWidth，就重置行宽，并向下移动已完成行中最高标签的高度。
if (rowWidth + placeable.width > maxWidth) {
y += rowHeight
rowWidth = 0
}记住每个标签的位置
扫描过程中，将每个标签选定的 x 和 y 坐标存入列表。放置阶段会重新使用这些位置。
计算总高度
最后一行完成后，布局的高度就是最终 y 坐标加上该行的高度。宽度则直接使用约束的 maxWidth。
报告大小并放置标签
使用总宽度和总高度调用 layout，然后遍历保存的位置，对每个可放置对象调用 placeRelative。
layout(maxWidth, totalHeight) {
placeables.forEachIndexed { i, p ->
p.placeRelative(positions[i])
}
}添加水平间距
在每个标签后将间距值加到行宽中，就能在标签之间插入小间隔。垂直间隔的处理方式相同。
Compose 也提供 FlowRow
布局库中的官方 FlowRow 会替您完成所有这些工作。亲自构建它，可以准确了解其内部原理。✨
FlowRow { Chip("Kotlin"); Chip("Compose") }您构建了真正的布局
您测量了子项，按宽度换行，并手动放置了每个标签。这就是一个从基本原理出发构建的生产级自定义布局。🎉
快速检查
什么情况会触发 FlowRow 换到新行？
回顾：会换行的 FlowRow
您以宽松方式测量标签，跟踪行宽，在溢出时换行，然后放置每个标签。这就是从零实现的 FlowRow。✅
用 AI 导师学习 Kotlin — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「可换行芯片的 FlowRow」课时是免费的吗？
是的 — 「可换行芯片的 FlowRow」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「可换行芯片的 FlowRow」这节课中我会学到什么？
从头构建真正的换行布局。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「可换行芯片的 FlowRow」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 测量与放置模型
- 编写 Layout Composable
- 约束与固有尺寸测量
- 可换行芯片的 FlowRow