Flutter原生侧滑删除组件Dismissible

Dismissible:https://docs.flutter.io/flutter/widgets/Dismissible-class.html

基本步骤:

(1)创建一个State全局的List变量
(2)用Dismissible包装每一个item
(3)设置Dismissible的background,提供删除时的UI显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import 'package:flutter/material.dart';

class DismissibleDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _DismissibleDemoPagePageState();
}

// 侧滑删除列表界面
class _DismissibleDemoPagePageState extends State<DismissibleDemoPage> {
final items = List<String>.generate(10, (i) => "Item $i");

@override
void initState() {
super.initState();
}

// Widget build(BuildContext context) {
// return Scaffold(
// appBar: new AppBar(
// title: new Text('Dismissible Demo'),
// ),
// body: ListView.builder(
// itemCount: items.length,
// itemBuilder: (context, index) {
// final item = items[index];
// return Dismissible(
// key: Key(item),
// crossAxisEndOffset: 100.0,
// onDismissed: (direction) {
// setState(() {
// items.removeAt(index);
// print(direction);
// });
// Scaffold.of(context)
// .showSnackBar(SnackBar(content: Text('remove $item')));
// },
// child: ListTile(
// title: Text('$item'),
// ),
// background: Container(
// color: Colors.red,
// ),
// );
// }),
// );
// }

@override
Widget build(BuildContext context) {
final title = 'Dismissing Items';
return MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Builder(builder: (BuildContext context) {
return Center(
child: Stack(
children: _buildCards(context),
));
}),
),
);
}

List<Widget> _buildCards(BuildContext context) {
var cards = List<Widget>();
for (String item in items) {
cards.add(Dismissible(
key: Key(item),
background: Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 16.0),
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('Dismiss',
style: Theme
.of(context)
.primaryTextTheme
.subhead
.copyWith(color: Colors.white)),
Icon(
Icons.delete,
color: Colors.white,
),
],
),
),
direction: DismissDirection.endToStart,
child: Container(
alignment: Alignment.centerLeft,
color: Colors.blue,
height: 50.0,
width: 200.0,
child: Text(item),
),
// Each Dismissible must contain a Key. Keys allow Flutter to uniquely identify Widgets.
// key: Key(item), We also need to provide a function that tells our app
// what to do after an item has been swiped away.
onDismissed: (direction) {
// Remove the item from our data source.
setState(() {
items.remove(item);
});
Scaffold
.of(context)
.showSnackBar(SnackBar(content: Text("$item dismissed")));
}));
}

return cards;
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :