Flutter中如何实现点击OverlayEntry子项目后移除自身

Flutter中如何实现点击OverlayEntry子项目后移除自身

要想在Flutter中展示一个自定义弹窗,我们可以使用OverlayEntry来实现。

分析

网上的大多数例子都是教大家如何使用OverlayEntry实现Android中的Toast效果,展示几秒钟后,调用OverlayEntry的remove方法去移除OverlayEntry。
但是想要实现点击OverlayEntry中的项目,再去移除OverlayEntry鲜有资料了。

解决办法

先声明后定义,如果你习惯了声明就定义就会导致在onPress中不能直接调用entry.remove();(被空指针异常搞怕了吧)

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
OverlayEntry entry;
entry = OverlayEntry(
builder: (BuildContext context) {
return Positioned(
top: 120,
left: MediaQuery.of(context).size.width / 2 - 120,
width: 240,
height: 180,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12))),
color: Colors.white,
child: ListView(
shrinkWrap: false,
padding: const EdgeInsets.all(0),
physics: ScrollPhysics(),
children: <Widget>[
FlatButton(
onPressed: () {
entry.remove();
},
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'全部',
style: TextStyle(
fontSize: 16,),
)
],
)
),
Divider(
height: 2,
),
FlatButton(
onPressed: () {
entry.remove();
},
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'原创',
style: TextStyle(
fontSize: 16,),
)
],
)
),
Divider(
height: 2,
),
FlatButton(
onPressed: () {
entry.remove();
},
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'收藏',
style: TextStyle(
fontSize: 16,),
)
],
)
),
Divider(
height: 2,
),
FlatButton(
onPressed: () {
entry.remove();
},
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'好友圈',
style: TextStyle(
fontSize: 16,),
)
],
)
),
Divider(
height: 2,
),
],
),
),
);
},
);
Overlay.of(viewService.context).insert(entry);

效果

(我快要被这缩进折磨死了,在AS中是好好地,复制出来就对不齐了,手动缩进好累啊)

设备:Essential Phone

环境:

1
2
3
4
Flutter 1.10.13-pre.10 • channel master • https://github.com/flutter/flutter.git
Framework • revision f4b4616f87 (2 days ago) • 2019-10-04 20:01:04 -0700
Engine • revision 7d90779bb6
Tools • Dart 2.6.0 (build 2.6.0-dev.0.0 d6c6d12ebf)
阅读量: