案例概述

Wrap 是一个自动换行的布局组件。当子组件超过容器宽度时，会自动换到下一行。本案例展示了如何使用 Wrap。

核心概念

1. Wrap 基础

Wrap 是自动换行的布局组件。

2. 间距控制

可以控制子组件之间的间距。

3. 对齐方式

支持多种对齐方式。

代码详解

示例 1：基础 Wrap

class BasicWrapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: List.generate(10, (index) {
        return Container(
          width: 80,
          height: 80,
          color: Colors.primaries[index % Colors.primaries.length],
          margin: const EdgeInsets.all(4),
        );
      }),
    );
  }
}

代码解释： Wrap 自动换行显示子组件。当一行空间不足时，自动移到下一行。spacing 控制水平间距，runSpacing 控制行间距。这比 Row 灵活，Row 会溢出，而 Wrap 自动换行。常用于标签、按钮组、网格等自适应布局。

示例 2：标签

class TagsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tags = ['Flutter', 'Dart', 'UI', '设计', '开发', '移动应用'];
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: tags.map((tag) {
        return Chip(label: Text(tag));
      }).toList(),
    );
  }
}

代码解释： 这个示例使用 Wrap + Chip 实现标签云。spacing 和 runSpacing 分别控制标签间的水平和垂直间距。Chip 是 Material Design 中的标签组件，自动处理样式。这种组合在搜索结果、热门标签、兴趣选择等场景中很常见。

示例 3：按钮组

class ButtonGroupExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      children: [
        ElevatedButton(onPressed: () {}, child: const Text('按钮1')),
        ElevatedButton(onPressed: () {}, child: const Text('按钮2')),
        ElevatedButton(onPressed: () {}, child: const Text('按钮3')),
        ElevatedButton(onPressed: () {}, child: const Text('按钮4')),
      ],
    );
  }
}

代码解释： Wrap 用于排列按钮组。当屏幕宽度不足时，按钮自动换行。这比 Row 更灵活，避免按钮溢出。常用于操作栏、过滤选项等。

示例 4：对齐方式

class AlignmentExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      alignment: WrapAlignment.center,
      spacing: 8,
      children: List.generate(5, (index) {
        return Container(
          width: 60,
          height: 60,
          color: Colors.blue,
        );
      }),
    );
  }
}

代码解释： alignment 参数控制 Wrap 内容的对齐方式。WrapAlignment.center 使内容居中。其他选项包括 start、end、spaceEvenly 等。crossAxisAlignment 则控制垂直对齐。

示例 5：可选择标签

class SelectableTagsExample extends StatefulWidget {
  @override
  State<SelectableTagsExample> createState() => _SelectableTagsExampleState();
}

class _SelectableTagsExampleState extends State<SelectableTagsExample> {
  final Set<int> _selectedTags = {};

  @override
  Widget build(BuildContext context) {
    final tags = ['标签1', '标签2', '标签3', '标签4', '标签5'];
    return Wrap(
      spacing: 8,
      children: List.generate(tags.length, (index) {
        return FilterChip(
          label: Text(tags[index]),
          selected: _selectedTags.contains(index),
          onSelected: (selected) {
            setState(() {
              if (selected) {
                _selectedTags.add(index);
              } else {
                _selectedTags.remove(index);
              }
            });
          },
        );
      }),
    );
  }
}

代码解释： 这个示例展示了可选择标签。使用 FilterChip 实现可选择功能。

高级话题

1. 动态/响应式设计

根据屏幕大小调整 Wrap。

2. 动画与过渡

自定义 Wrap 动画。

3. 搜索/过滤/排序

过滤标签。

4. 选择与批量操作

支持多选。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整 Wrap
• 支持键盘快捷键
• 提供清晰的布局

实际应用场景

• 标签显示：显示标签
• 按钮组：显示按钮组
• 搜索结果：显示搜索结果
• 分类选择：选择分类

扩展建议

• 学习高级布局库
• 研究性能优化
• 探索自定义效果
• 集成布局库

总结

Wrap 是自动换行的有效方式。通过灵活使用 Wrap，可以创建各种布局效果。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net