flutter 側滑刪除+側滑顯示刪除按鈕

一、側滑刪除

　　1.一、Dismissible組件

二、側滑顯示刪除按鈕

　　2.一、手勢監聽水平滑動

------------------------------------分割線--------------------------------------------------------

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(20, (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(20, (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[100]) : new Text(''), new Text(item['name']) ], ), ), ); }, ), ); } }

效果以下

          

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