flutter 侧滑删除+侧滑显示删除按钮

摘要:
false:true;//items[index]['show']!

1、侧滑删除

1.1、Dismissible组件

2、侧滑显示删除按钮

2.1、手势监听水平滑动

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

dismissRemove.dart

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
classDismessremove extends StatelessWidget {
  final title = '滑动删除';
  final List<String> items  =  new List<String>.generate(20, (i) => "Item ${i + 1}");
  @override
  Widget build(BuildContext context) {
    returnScaffold(
      appBar: newAppBar(
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.pop(context); //返回
}),
        title: newText(title),
      ),
      body: newListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item =items[index];
          return newDismissible(
            //Each Dismissible must contain a Key. Keys allow Flutter to
            //uniquely identify Widgets.
            key: newKey(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: newContainer(color: Colors.red),
            child: new ListTile(title: new Text('$item'),),
          );
        },
      ),
    );
  }
}

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

dismissshow.dart

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
classDismessshow 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(20, (i) {
    return {'name': 'item${i}', 'show': false};
  });
  change(index) {
    print('xxx');
  }
  @override
  Widget build(BuildContext context) {
    returnScaffold(
      appBar: newAppBar(
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.pop(context); //返回
}),
        title: newText(title),
      ),
      body: newListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item =items[index];
          return newGestureDetector(
//onHorizontalDragStart:(startDetails){},
onHorizontalDragEnd: (endDetails) {
              //怎么判断方向还是个问题
setState(() {
                items[index]['show'] =
                    items[index]['show'] == true ? false : true;  //items[index]['show']!= items[index]['show'] 这样不行为啥
});
            },
            child: newContainer(
              height: 40.0,
//color: Colors.amber,
              padding: const EdgeInsets.only(left: 10.0),
              decoration: newBoxDecoration(
                  border: newBorder(
                bottom: BorderSide(color: Colors.amber,  0.5),
              )),
              child: newRow(
                children: <Widget>[
                  item['show'] == true
                      ? newRaisedButton(
                          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[100])
                      : new Text(''),
                  new Text(item['name'])
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

效果如下

flutter 侧滑删除+侧滑显示删除按钮第1张flutter 侧滑删除+侧滑显示删除按钮第2张flutter 侧滑删除+侧滑显示删除按钮第3张

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

免责声明:文章转载自《flutter 侧滑删除+侧滑显示删除按钮》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇导致磁盘阵列数据丢失的7个常见原因/早做准备哦解决chrome浏览器adobe flash player不是最新版本亲测可用的方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SpringBoot启动过程解析(简化)

springBoot web方式启动过程 在这个启动过程中会有各种SpringBoot对外提供的扩展接口来对不同启动阶段进行自定义操作。 了解启动过程也是为了让我们更好理解SpringBoot提供的扩展接口使用   jar包启动或者外置war包启动都是调用SpringApplication.run()方法进行项目启动 tomcat会查询context上下文...

*引使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法。

最近在做我们单位的内部一个系统,使用了类似于Asp.Net 2.0里面的Theme(主题)的功能。此功能的核心是一个动态的CSS定义,根据用户选择的不同主题内容来发送不同的CSS样式文本。 本来这个问题很好解决,在HTML中的<head>区内使用一个: <%#=base.GetCssInclude()%> 就可以解决,不过我没有...

图片轮播插件-carouFredSel

carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效。 主页地址:http://caroufredsel.dev7studios.com/ 例子: html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...

Asp.net Core 系列之--4.事务、日志及错误处理

ChuanGoing 2019-11-17     这篇原本想把事务处理、日志处理、错误处理、授权与鉴权一并介绍完的,授权和鉴权我想结合自定义权限来介绍,全部放到这里篇幅可能太长,因此权限部分将会在下篇来介绍。先说下我接下来的打算把,下篇将介绍权限控制,结合Oauth2.0和OpenId(OIDC)以及自定义权限来介绍;完了后会结合之前所介绍的基础来实现一...

Android自定义控件

Android自定义控件 安卓在使用中大多数使用已有的一些控件,用法比较简单,还有一部分是比较复杂的、用户自己想的控件,这些就需要进行自定义控件,今天就来简单说一下自定义控件。 1、绘制过程 创建一个类,继承View类 onMeasure()方法,测量计算视图的大小 onLayout()方法,设置视图在屏幕中显示的位置 onDraw()方法,绘制视图...

Android中WebView使用总结

1.在应用的配置文件中添加网络权限 1 <!-- 添加使用WebView的需要的internet权限 --> 2 <uses-permission android:name="android.permission.INTERNET"/> 2.支持JavaScript 1 //开启Javascript支...