继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Flutter Wrap & Chip

Flutter笔记
关注TA
已关注
手记 49
粉丝 30
获赞 45

在写业务的时候,难免有搜索功能,一般搜索功能的页面如下:
图片描述
那如果在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, 我们只需要组合起来就可以达到我们的目的。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP