Flutter Wrap & Chip

在写业务的时候，难免有搜索功能，一般搜索功能的页面如下：

那如果在Android上面写的话，
一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。
当然这个自动换行的LayoutManager 还得自己定义，去算坐标。
那 Flutter 提供给我们很方便的控件 Wrap + Chip，用这两个就能轻松实现上诉效果。
先来说一下Wrap。

Wrap

看名字我们也能看出来，它就是一个包裹住子布局的 Widget，并且可以自动换行。
先看一下构造函数，来确定一下需要传入什么参数：

1.  `Wrap({`
  
2.   `Key key,`
    
3.   `this.direction =  Axis.horizontal,  // 子布局排列方向`
    
4.   `this.alignment =  WrapAlignment.start,  // 子布局对齐方向`
    
5.   `this.spacing =  0.0,  // 间隔`
    
6.   `this.runAlignment =  WrapAlignment.start,  // run 可以理解为新的一行，新的一行的对齐方向`
    
7.   `this.runSpacing =  0.0,  // 两行的间距`
    
8.   `this.crossAxisAlignment =  WrapCrossAlignment.start,`
    
9.   `this.textDirection,`
    
10.   `this.verticalDirection =  VerticalDirection.down,`
    
11.   `List<Widget> children =  const  <Widget>[],`
    
12.  `})  :  super(key: key, children: children);`
    

最基本的我们只需要传入一个children即可，但是我们想要好的效果，一般都会传入 spacing 和 runSpacing。

Chip

下面看一下 Chip，Chip可以理解为碎片的意思，还是先来看一下构造函数：

1.  `Chip({`
    
2.   `Key key,`
    
3.   `this.avatar,//左侧Widget，一般为小图标`
    
4.   `@required  this.label,//标签`
    
5.   `this.labelStyle,`
    
6.   `this.labelPadding,`
    
7.   `this.deleteIcon//删除图标`
    
8.   `this.onDeleted//删除回调，为空时不显示删除图标`
    
9.   `this.deleteIconColor//删除图标的颜色`
    
10.   `this.deleteButtonTooltipMessage//删除按钮的tip文字`
    
11.   `this.shape//形状`
    
12.   `this.clipBehavior =  Clip.none,`
    
13.   `this.backgroundColor//背景颜色`
    
14.   `this.padding,  // padding`
    
15.   `this.materialTapTargetSize//删除图标material点击区域大小`
    
16.   `})`

可以看到这里东西还是不少的，最基本的要传入一个label。
label 一般就为我们的 text，先来看一下只定义一个 label 的效果：

下面再加入 avatar：

再来加入 delete：

这里注意，一定要设置上 onDeleted 参数，否则不显示delete控件。

编写 ‘历史搜索’

前面都是在 children 里添加widget 来达到目的，不好做删除工作。
现在我们来使用 ListView，并添加删除事件。
代码如下：

1.  `import  'package:flutter/material.dart';`
    
2.    
    
3.  `class  WrapPage  extends  StatefulWidget  {`
    
4.   `@override`
    
5.   `_WrapPageState createState()  =>  _WrapPageState();`
    
6.  `}`
    
7.    
    
8.  `class  _WrapPageState  extends  State<WrapPage>  {`
    
9.    
    
10.   `// 生成历史数据`
    
11.   `final  List<String> _list =  List<String>.generate(10,  (i)  =>  'chip$i');`
    
12.    
    
13.   `@override`
    
14.   `Widget build(BuildContext context)  {`
    
15.   `return  Scaffold(`
    
16.   `appBar:  AppBar(`
    
17.   `title:  Text('WrapPage'),`
    
18.   `),`
    
19.   `body:  Wrap(`
    
20.   `spacing:  10,`
    
21.   `runSpacing:  5,`
    
22.   `children: _list.map<Widget>((s)  {`
    
23.   `return  Chip(`
    
24.   `label:  Text('$s'),`
    
25.   `avatar:  Icon(Icons.person),`
    
26.   `deleteIcon:  Icon(`
    
27.   `Icons.close,`
    
28.   `color:  Colors.red,`
    
29.   `),`
    
30.   `onDeleted:  ()  {`
    
31.   `setState(()  {`
    
32.   `_list.remove(s);  // 删除事件`
    
33.   `});`
    
34.   `},`
    
35.   `);`
    
36.   `}).toList()`
    
37.   `));`
    
38.   `}`
    
39.  `}`

效果如下：

总结

Flutter 提供给我们很多好用的 widget， 我们只需要组合起来就可以达到我们的目的。