前言

当我们在 Row 中水平排列一系列标签（如搜索历史、音乐风格）时，最令开发者头疼的问题就是“溢出（Overflow）”。传统的 Row 是一条筋走到底，一旦内容超过屏幕宽度，黄黑相间的警告条便会大煞风景。

Wrap（折行布局） 的出现，完美解决了这一痛点。它像水流一样，遇到边界会自动寻找下一行，为“流式排版”提供了最优雅的解决方案。

目录

• 一、 Wrap 的智慧：自动换行的弹性逻辑
• 二、 间距控制：Spacing 与 RunSpacing
• 三、 场景复现：音乐流派标签云
• 四、 结语

一、 Wrap 的智慧：自动换行的弹性逻辑

Wrap 在水平方向（默认）排列子组件，当这一行放不下时，它会自动开启下一行。这在处理动态长度的数据（如用户输入的标签）时至关重要。

二、 间距控制：Spacing 与 RunSpacing

为了让排版不显得拥挤，Wrap 提供了两个维度的间距控制：

三、 场景复现：音乐流派标签云

在音乐播放器示例中，曲风标签（Synthwave, Electronic…）长度不一。使用 Wrap 可以确保它们在不同宽度的设备上都能完美排版：

Wrap(
  spacing: 8,    // 标签之间的左右空隙
  runSpacing: 8, // 换行后的上下空隙
  children: [
    _buildChip('Synthwave'),
    _buildChip('Electronic'),
    // ... 更多标签
  ],
)

四、 结语

Wrap 是处理不规则、不确定数量组件的最佳选择。它打破了 Row 的线性僵化，为鸿蒙跨端应用带来了类似网页排版的灵活性，是构建动态列表、搜索历史、详情页标签的必备利器。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net