鸿蒙跨端框架Flutter学习day 2、常用UI组件-折行布局 Wrap & Chip

前言

当我们在 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

鸿蒙跨端框架Flutter学习day 2、常用UI组件-折行布局 Wrap & Chip

前言

目录

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

二、 间距控制：Spacing 与 RunSpacing

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

四、 结语

二、间距控制：Spacing 与 RunSpacing

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

四、结语