1、侧滑删除

  1.1、Dismissible组件

2、侧滑显示删除按钮

  2.1、手势监听水平滑动

------------------------------------分割线--------------------------------------------------------

dismissRemove.dart

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart'; class Dismessremove extends StatelessWidget {
final title = '滑动删除';
final List<String> items = new List<String>.generate(, (i) => "Item ${i + 1}");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context); // 返回
}),
title: new Text(title),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return new Dismissible(
// Each Dismissible must contain a Key. Keys allow Flutter to
// uniquely identify Widgets.
key: new Key(item),
// We also need to provide a function that will tell our app
// what to do after an item has been swiped away.
onDismissed: (direction) {
items.removeAt(index);
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text("$item dismissed")));
},
// Show a red background as the item is swiped away
background: new Container(color: Colors.red),
child: new ListTile(title: new Text('$item'),),
);
},
),
);
}
}

效果就是滑动一下就马上删除数据,非常的突兀。

dismissshow.dart

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart'; class Dismessshow extends StatefulWidget {
@override
_Dismessshow createState() => _Dismessshow();
} class _Dismessshow extends State<Dismessshow> {
final title = '滑动显示';
// final List<String> items = [
// '1','2'
// ];
// final List<Map> items = [
// {'name': 'xxx', 'show': false}
// ];
final List<Map> items = new List<Map>.generate(, (i) {
return {'name': 'item${i}', 'show': false};
});
change(index) {
print('xxx');
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context); // 返回
}),
title: new Text(title),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return new GestureDetector(
// onHorizontalDragStart:(startDetails){},
onHorizontalDragEnd: (endDetails) {
// 怎么判断方向还是个问题
setState(() {
items[index]['show'] =
items[index]['show'] == true ? false : true; // items[index]['show']!= items[index]['show'] 这样不行为啥
});
},
child: new Container(
height: 40.0,
// color: Colors.amber,
padding: const EdgeInsets.only(left: 10.0),
decoration: new BoxDecoration(
border: new Border(
bottom: BorderSide(color: Colors.amber, width: 0.5),
)),
child: new Row(
children: <Widget>[
item['show'] == true
? new RaisedButton(
child: new Text('remove'),
onPressed: () {
print('click');
setState(() {
items.removeAt(index);
});
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text('${item["name"]} is dismissed')));
},
color: Colors.yellow,
splashColor: Colors.pink[])
: new Text(''),
new Text(item['name'])
],
),
),
);
},
),
);
}
}

效果如下

          

github:https://github.com/ft1107949255/kiminitodoke

flutter 侧滑删除+侧滑显示删除按钮的更多相关文章

  1. Win10删除文件显示删除确认对话框

    1.右键单击“回收站”图标:2.在弹出属性窗口中,点击“属性”选项:3.在“回收站”窗口中,在选项“显示删除确认对话框”前面打钩,并单击“确定”按钮:

  2. ios8 tableView设置滑动删除时 显示多个按钮

      ** *  tableView:editActionsForRowAtIndexPath:     //设置滑动删除时显示多个按钮 *  UITableViewRowAction          ...

  3. android gridview布局,实现长按某一个,所有项都显示删除的图标

    最近一直忙着项目开发,有段时间没有写博文了,今天想跟大家分享的是长按gridview中的某一项显示删除图标,此时点击某项便可删除,再长按取消删除图标. gridview的布局文件如下: <?xm ...

  4. android SQLite(安卓数据库的插入显示删除)

    1.利用android自带数据库实现增加.删除.显示用户等操作 只是一个基本模型,为即将的与 复利计算apk整合做牺牲. 就不上传百度云供大家下载了 等整合了复利计算再上传. 数据的插入和显示:   ...

  5. MySQL 创建、删除、显示数据库、数据表

    1 创建.删除.显示数据库 -- 创建数据库 create database student_db character set utf8 collate utf8_general_ci; -- 删除数 ...

  6. java使用Jsch实现远程操作linux服务器进行文件上传、下载,删除和显示目录信息

    1.java使用Jsch实现远程操作linux服务器进行文件上传.下载,删除和显示目录信息. 参考链接:https://www.cnblogs.com/longyg/archive/2012/06/2 ...

  7. 关于Unity中的删除、显示和隐藏节点

    一.删除节点和组件 1.删除一个节点,以及节点上面所有的组件全部删除了//删除一个节点的时候,节点上面所有的组件也会被删除:MonoBehaviour.Destroy(this.gameObject) ...

  8. NuGetTools:批量上传、删除和显示NuGet包

    快照 前言 NuGet是.NET开发必不可少的包管理工具,在日常更新版本过程中,可能需要批量发布 NuGet 包,也不可避免需要发布一些测试的包,后期想将这些测试或者过期的包删除掉.nuget.org ...

  9. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   ...

随机推荐

  1. C# 生成全球唯一标识符GUID

    string strguid = Guid.NewGuid().ToString();//57d99d89-caab-482a-a0e9-a0a803eed3ba 生成标准的标志符 (36位标准)st ...

  2. 65-如何部署 Calico 网络?

    Calico 是一个纯三层的虚拟网络方案,Calico 为每个容器分配一个 IP,每个 host 都是 router,把不同 host 的容器连接起来.与 VxLAN 不同的是,Calico 不对数据 ...

  3. docker学习笔记---基本命令

    [root@docker ~]# docker Usage: docker [OPTIONS] COMMAND A self-sufficient runtime for containers Opt ...

  4. OpenResty + ModSecurity + OWASP CRS

    本篇将介绍如何使用OpenResty和ModSecurity 来构建自己的WAF,安装过程整体与Nginx是类似的,但也有些区别,在文中会特别指出,本篇算是用openresty对前面两篇nginx和c ...

  5. 记一次ES查询数据突然变为空的问题

    基本环境 elasticsearch版本:6.3.1 客户端环境:kibana 6.3.4.Java8应用程序模块. 其中kibana主要用于数据查询诊断和查阅日志,Java8为主要的客户端,数据插入 ...

  6. 通过requestAnimationFrame判断浏览器帧率

    /** ** 得到浏览器每秒帧数fps ** ** @Date Mar 13 2013 **/ var showFPS = (function(){ var requestAnimationFrame ...

  7. 精通awk系列(9):修改字段或NF引起的$0重新计算

    回到: Linux系列文章 Shell系列文章 Awk系列文章 修改字段或NF值的联动效应 注意下面的分割和计算两词:分割表示使用FS(field Separator),计算表示使用预定义变量OFS( ...

  8. DataGridView右键菜单自定义显示及隐藏列

    WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为: ...

  9. U8隐藏的配置项

    数据表:accinformation 我使用了一个是否自动审核库存生成的单据,看看是否能解决调拨单自动生成的其他出入库单自动审核的功能.

  10. Docker动态添加端口,不需要重新建立镜像

    Docker容器在运行期间有时可能会需要修改或者添加暴露的端口,但是有时候运行的容器又不想再另外建立一个新的镜像.这时可以找到docker容器的存放地方,然后直接修改配置文件. 我们的容器都是保存在/ ...