Flutter中showModalBottomSheet点击内容区域自动关闭Dialog解决

问题描述

Flutter中showModalBottomSheet底部弹框,无论点击阴影区域还是点击内容区域,默认都会导致当前对话框自动关闭。如果想在弹框中停留并进行一些操作,我们需要设置在点击ModalBottomSheet内容区域时不关闭弹框,而是手动点击触发关闭弹框。

解决方案

(1)showModalBottomSheetbuilder中最外层包裹GestureDetector组件,onTap属性空实现
(2)内层组件照常包裹GestureDetector实现触碰监听,使用Navigator.pop(context)关闭弹窗

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
void showAddToCartDialog(BuildContext context, goods) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return GestureDetector(
onTap: () {

},
child: Container(
child: Column(
children: <Widget>[
...
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: double.infinity,
height: 52.0,
alignment: Alignment.center,
child: Text('Submit', style: TextStyle(color: ThemeUtil.textColor, fontSize: 16.0),),
color: ThemeUtil.currentColorTheme,
),
),
],
)
),
);
}
);
}

Powered by AppBlog.CN     浙ICP备14037229号

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

访客数 : | 访问量 :