前言
当我们在 Row 中水平排列一系列标签（如搜索历史、音乐风格）时，最令开发者头疼的问题就是"溢出（Overflow）"。传统的 Row 是一条筋走到底，一旦内容超过屏幕宽度，黄黑相间的警告条便会大煞风景。
Wrap（折行布局） 的出现，完美解决了这一痛点。它像水流一样，遇到边界会自动寻找下一行，为"流式排版"提供了最优雅的解决方案。
目录
- [一、 Wrap 的智慧：自动换行的弹性逻辑](#一、 Wrap 的智慧：自动换行的弹性逻辑)
- [二、 间距控制：Spacing 与 RunSpacing](#二、 间距控制：Spacing 与 RunSpacing)
- [三、 场景复现：音乐流派标签云](#三、 场景复现：音乐流派标签云)
- [四、 结语](#四、 结语)
一、 Wrap 的智慧：自动换行的弹性逻辑
Wrap 在水平方向（默认）排列子组件，当这一行放不下时，它会自动开启下一行。这在处理动态长度的数据（如用户输入的标签）时至关重要。
是
否
Tag 1
Tag 2
Tag 3
宽度溢出?
新起一行渲染 Tag 4
继续在当前行渲染
二、 间距控制：Spacing 与 RunSpacing
为了让排版不显得拥挤，Wrap 提供了两个维度的间距控制：
| 属性 | 方向 | 作用描述 |
|---|---|---|
| spacing | 主轴 (Horizontal) | 同一行内，相邻子组件之间的水平间距 |
| runSpacing | 纵轴 (Vertical) | 相邻行与行之间的垂直间距 |
三、 场景复现：音乐流派标签云
在音乐播放器示例中，曲风标签（Synthwave, Electronic...）长度不一。使用 Wrap 可以确保它们在不同宽度的设备上都能完美排版：
dart
Wrap(
spacing: 8, // 标签之间的左右空隙
runSpacing: 8, // 换行后的上下空隙
children: [
_buildChip('Synthwave'),
_buildChip('Electronic'),
// ... 更多标签
],
)四、 结语
Wrap 是处理不规则、不确定数量组件的最佳选择。它打破了 Row 的线性僵化，为鸿蒙跨端应用带来了类似网页排版的灵活性，是构建动态列表、搜索历史、详情页标签的必备利器。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net