点击和滑动删除

378 阅读1分钟

(-)点击事件

1,Flutter 提供了6种类型的button ,FlatButton, DropdownButton, FloatingActionButton, IconButton,InkWell,RawMaterialButton,如果实现点击事件,只要实现onTap方法即可,文档描述如下

2,使用InkWell做简单说明,InkWell 可以实现水波纹动画,splashColor设置水波纹的颜色,onTap是要实现的点击事件

(二)普通widget添加点击实现

1,如果使用的VSCode开发工具,可以选中要添加事件的widget,然后选择快捷键(mac)Control + Shift + R,添加父的Widget,然后使用GestureDetector,封装了开发中需要的各种手势,这里我们简单实现,点击,双击,水平滑动开始和水平滑动结束实现

(三)实现列表的滑动删除和监听

1,创建listView要显示的数据,简单创建100条数据

2,使用ListView.separated构造方法,有两个必传的参数 itemBuilder,每项要显示的内容,要是实现滑动删除,这里使用 Dismissible 组件来包裹要显示的内容item, separatorBuilder,每项对应的分割线。

3,Dismissible组件,有两个必传的参数,key,child,child就是要显示的内容,这里赋值给direction: DismissDirection.endToStart,表示删除item只能从右往左边滑动,然后在onDismissed方法中,从集合中删除要删除的item,然后告诉Dart,数据需要更新,拦截删除的内容,可以实现confirmDismiss,这里我们弹出dialog,提示用户。

滑动删除效果图如下