145 lines
5.1 KiB
Markdown
145 lines
5.1 KiB
Markdown
# 【Demo】Wrap 自动换行布局 + Chip 标签家族
|
||
|
||
> 源文件：`lib/pages/demo/wrap_demo.dart` ｜ 分类：基础布局
|
||
> 一句话：Row 一行排不下就溢出报错，Wrap 会自动换行 —— 做"标签流"必备。
|
||
|
||
---
|
||
|
||
## 一、这个 Demo 解决什么问题
|
||
|
||
"搜索历史标签"、"科目标签"、"技能标签"这类**数量不固定**的横向排列场景：
|
||
- `Row` 一行排不下会**直接溢出报错**（黄色条纹警告），不会换行；
|
||
- `Wrap` 空间不够时**自动换到下一行**，是标签流的正解。
|
||
|
||
本 Demo 还完整演示了 Flutter 的 **Chip 标签家族**：`Chip` / `ActionChip` / `FilterChip`，
|
||
以及一个**像素级可控的自绘标签 `CustomTag`**（设计稿要求精确高度/间距时的选择）。
|
||
|
||
---
|
||
|
||
## 二、怎么运行 / 演示内容
|
||
|
||
```dart
|
||
runApp(const MaterialApp(home: WrapDemoPage()));
|
||
```
|
||
|
||
页面是一个 Wrap，里面混排了 8 种 Chip 样式 + 自绘 CustomTag：
|
||
带图标、可删除、可点击、选中态、深色底、胶囊圆角……一屏看完所有变体。
|
||
|
||
---
|
||
|
||
## 三、核心知识点（新手向）
|
||
|
||
### 1. Wrap 的核心属性
|
||
```dart
|
||
Wrap(
|
||
direction: Axis.horizontal, // 排布方向（默认水平）
|
||
spacing: 24, // 同一行内 item 之间的水平间距
|
||
runSpacing: 20, // 行与行之间的垂直间距（run = "行/批"）
|
||
children: [...],
|
||
)
|
||
```
|
||
|
||
### 2. 对比记忆
|
||
| 组件 | 行为 |
|
||
|---|---|
|
||
| `Row` | 横向排列，**溢出报错**，不换行 |
|
||
| `Wrap` | 横向排列，**空间不足自动换行** |
|
||
| `Column` | 纵向排列，溢出报错（想纵向换行用 `Wrap(direction: Axis.vertical)`） |
|
||
|
||
### 3. Chip 家族速查（Flutter 3.x 注意！）
|
||
| 组件 | 用途 | 必填回调 |
|
||
|---|---|---|
|
||
| `Chip` | 纯展示 / 可删除标签 | `onDeleted` 可选 |
|
||
| `ActionChip` | 可点击的标签（**旧 `Chip.onPressed` 已移除**） | `onPressed` |
|
||
| `FilterChip` | 带选中态的标签（**旧 `Chip.selected` 已移除**） | `onSelected` |
|
||
|
||
```dart
|
||
// 可删除
|
||
Chip(
|
||
label: const Text("Flutter"),
|
||
deleteIcon: Icon(Icons.close, size: 16.w),
|
||
onDeleted: () => print("删除 Flutter"),
|
||
)
|
||
|
||
// 可点击（Flutter 3.x 用 ActionChip）
|
||
ActionChip(
|
||
label: const Text("UniApp"),
|
||
onPressed: () => print("点击 UniApp"),
|
||
)
|
||
|
||
// 选中态（Flutter 3.x 用 FilterChip）
|
||
FilterChip(
|
||
label: const Text("JavaScript"),
|
||
selected: true,
|
||
selectedColor: const Color(0xFF4CAF50),
|
||
onSelected: (_) {},
|
||
)
|
||
```
|
||
|
||
### 4. 自绘标签 CustomTag 为什么存在
|
||
标准 Chip 的高度/内边距是 Material 规范定的，**设计稿要求"固定 24px 高、图标与文字精确 4px"时**，
|
||
Chip 调不精确 —— 这时用 `Container + Row` 手写一个，完全可控：
|
||
- `InkWell` 提供点击涟漪（`borderRadius` 让涟漪跟随圆角）；
|
||
- `TextStyle(height: 1)` 去掉文字默认行高，避免把容器撑高。
|
||
|
||
---
|
||
|
||
## 四、关键代码剖析
|
||
|
||
```dart
|
||
// 自绘标签骨架（像素级可控的核心结构）
|
||
return Material(
|
||
color: Colors.transparent, // 消除 InkWell 默认的白底
|
||
child: InkWell(
|
||
onTap: onTap,
|
||
borderRadius: BorderRadius.circular(4.r),
|
||
child: Container(
|
||
height: 24.h, // 精确高度
|
||
padding: EdgeInsets.only(left: 6.w, right: 6.w),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFEDF2FF),
|
||
borderRadius: BorderRadius.circular(4.r),
|
||
border: Border.all(color: const Color(0xFFD6E4FF)),
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
if (icon != null) ...[
|
||
Icon(icon, size: 12.w, color: iconColor),
|
||
SizedBox(width: 4.w), // 图标与文字精确 4px
|
||
],
|
||
Text(label, style: TextStyle(fontSize: 12.sp, height: 1)),
|
||
if (onDeleted != null) ...[
|
||
SizedBox(width: 2.w),
|
||
GestureDetector(onTap: onDeleted, child: Icon(Icons.close, size: 12.w)),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
),
|
||
)
|
||
```
|
||
|
||
要点：
|
||
- `Material + InkWell` 组合才有水波纹；`InkWell` 直接包 `Container` 时涟漪会被容器背景盖住；
|
||
- 用 `if (xx != null) ...[]` 实现"可选 icon / 可选删除叉"——传 `null` 就不渲染。
|
||
|
||
---
|
||
|
||
## 五、踩坑记录
|
||
|
||
1. **`Chip.onPressed` / `Chip.selected` 在 Flutter 3.x 已移除**，分别改用 `ActionChip` / `FilterChip`（旧代码会编译报错）。
|
||
2. `Wrap` 外层要给它**有界的宽度**（比如直接当 body 用，或放 `Padding` 里），否则换行无从谈起。
|
||
3. 自绘标签里文字务必 `height: 1`，否则默认行高会让"24px 高"变成"30px+ 高"。
|
||
4. `print` 只适合 Demo 调试，真实项目用 `debugPrint` 或日志组件（见 dio_demo 的注释）。
|
||
|
||
---
|
||
|
||
## 六、扩展思考
|
||
|
||
- **`Flow`**：Wrap 的高阶版，自定义换行算法（间距均匀分布、瀑布流），性能更好但代码量大；
|
||
- 标签流 + 搜索历史的真实场景：数据存本地（shared_preferences）→ 读取渲染 Wrap → 点击标签直接搜索；
|
||
- Chip 的 `shape: StadiumBorder()` = 胶囊全圆角，`avatar` 放小图标、`labelPadding` 控制文字内边距；
|
||
- 本项目 `theme_demo` 里的品牌切换、`note_picker_demo` 里的"加号格"，都用了 Wrap/网格思路，可对照学习。
|
||
|