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

最新推荐文章于 2024-05-18 21:52:05 发布
最新推荐文章于 2024-05-18 21:52:05 发布
阅读量1.3k 收藏
点赞数
分类专栏： Flutter快速入门实战 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012766656/article/details/130472170
版权

问题描述

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

解决方案

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

void showAddToCartDialog(BuildContext context, goods) {
   
  showModalBottomSheet(
    context
了解本专栏 订阅专栏 解锁全文 超级会员免费看
AppBlog_CN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
【Flutter】如何 Dialog 弹窗设置点击空白处不关闭
Code Metaverse
06-14 2044
Dialog 是一个常见的 UI 元素，它可以用于显示信息、询问问题或收集用户输入。
Flutter技术点-showModalBottomSheet关闭
修车码农的博客
06-08 1万+
由于要使用到底部弹出的选择器，在flutter中可以直接使用showModalBottomSheet来自定义底部选择器 代码如下： void _showGenderPanel(context) { showModalBottomSheet( context: context, builder: (context) { return Container( height: 120, child: C
Flutter 中的 BottomSheet 小部件：全面指南
最新发布
smileKH的博客
05-18 670
是 Flutter 的 Material 组件库中的一个组件，用于创建从屏幕底部弹出的模态视图。它通常用于提供额外的操作或信息，而不会完全打断用户当前的操作流程。Text('自定义 BottomSheet'),},child: Text('关闭'),),],),},
flutter 弹窗自己关闭_【Flutter】Flutter底部弹窗ModalBottomSheet详解
weixin_28728279的博客
12-27 1642
Flutter底部弹窗showModalBottomSheet（）详解分两部分内容，基础参数设置和显示高度调整修改高度为自适应，请查看【Flutter】Flutter底部弹窗ModalBottomSheet详解2，设置高度为包裹内容构造函数参数详解Future<T> showModalBottomSheet<T>({ @required BuildContext con...
ShowDialog()的超简单的关闭用法
11-08
利用ShowDialog（）事先窗口的无代码的关闭和退回
解决：Flutter 关闭Dialog退出App问题
Ever69的博客
08-21 2585
最近使用Flutter重写替换了原生的一部分页面，页面中有到Dialog，结果弹出的时候好好的，关，关不掉了，一点确认或取消按钮就直接将App退到后台了，这让我百思不得其解，之前也有用过Flutter的Dialog，也没出现过这种情况啊，明明是一毛一样的代码。 就是这段代码 showDialog( context: context, barrierDismissible: true,
flutter getx弹起底部弹窗 监听关闭
热门推荐
weixin_43575775的博客
01-09 3万+
在await Get.bottomSheet 之后进行弹窗判断 Get.isBottomSheetOpen == false 说明弹窗已经关闭了 然后做逻辑处理。在内部添加 关闭按钮Get.back();当调用getx的底部弹窗 Get.bottomSheet 弹起后 关闭弹窗没有相应的回调。isDismissible 是 关闭点击空白区域自动关闭 设置为flase,然后。上面这种方式有缺陷： 系统返回键也可关闭弹窗。Get.bottomSheet 返回一个future。代码如下（因为有封装 有点复杂）
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
Flutter之自定义Dialog实现版本更新弹窗功能的实现 Flutter是一款跨平台的移动应用开发框架，它提供了非常多的组件和功能，使得开发者可以快速构建高质量的应用程序。在实际开发中，我们经常需要实现一些自定义的...
Flutter 自定义dialog工具类
01-07
自定义一个Loading等待Dialog工具类 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; /* * 自定义Loading等待弹框 * @params text 提示内容 */ class LoadingDialog extends...
Flutter 自定义Dialog
01-07
import 'package:flutter/material.dart'; import './components/MyDialog.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ...
Flutter中http请求抓包的完美解决方案
08-26
Flutter中http请求抓包的完美解决方案 在本篇文章中，我们将详细介绍 Flutter 中 http 请求抓包的完美解决方案。通过对 Flutter 中 http 相关源码的研读，我们发现了 http 请求抓包的关键所在。 首先，让我们从 ...
Flutter – 简单封装 showModalBottomSheet （仿iOS效果）
01-08
效果图 使用方法 导入 jhBottomSheet.dart JhBottomSheet.showText( context, dataArr:['hello', 'world', 123, 456], // title: 请选择, // showRedText: true, clickCallback:(index,text) { print(index); print(text); }
flutter showbottomsheet showmodalbottomsheet底部弹出框
weixin_34318326的博客
12-06 1646
2019独角兽企业重金招聘Python工程师标准>>> ...
13 Flutter UI 之 对话框
github_36850997的博客
02-26 208
Flutter UI 之对话框。
Flutter 自定义Dialog之LoadingDialog+拦截安卓返回键关闭Dialog+点击外部关闭Dialog
zhumj_zhumj的专栏
01-09 1464
Flutter 自定义Dialog之LoadingDialog+拦截安卓返回键关闭Dialog+点击外部关闭Dialog
BottomSheetDialogFragment 监听关闭开启
丿灬安之若死
01-10 906
方法可以通过参数传递进来。
Flutter之BottomSheet
菜鸟博客
05-29 8651
在Flutter之SnackBar原理详解详细的介绍了SnackBar的使用极其原理，SnackBar主要功能是提供了一个简单的消息，虽然跟用户有一定的交互。但是其目的主要是提示性消息。且会自动消失。除了SnackBar之外，Flutter又提供了一个BottomSheet，该组件可以在屏幕底部展示了一个可供用户交互功能的页面。 通过本篇博文你可以了解到： 1、showBottomSheet和showModalBottomSheet的区别 2、关闭BottomSheet的方式 3、BottomSheet的基
Flutter之底部面板showModalBottomSheet
chunchun1230的博客
01-21 6022
模态底部面板是菜单或对话框的替代方案，可防止用户与其他控件进行互动，可以使用showModalBottomSheet函数创建和显示模态底部面板。  代码如下：   效果如图所示:    ...
Flutter 关闭弹框并finish掉当前页面
徐代龙的技术专栏
07-18 1万+
场景描述： 在一个用户登录退出的场景模式下，并关闭掉当前页面，场景可能类似如下： 如图，当我们点击确定退出按钮，去请求接口，请求成功后，关闭当前dialog，然后再退出当前页面。 上部分代码： setting_page.dart // 弹框 void showLoginOutDialog() { showDialog( context: context, ...
flutter showModalBottomSheet监听点击遮罩层关闭
08-17
要实现在点击底部弹框的遮罩层时不关闭弹框，可以通过设置ModalBottomSheet的背景点击回调来实现。具体方法是在showModalBottomSheet方法中传入一个builder参数，在builder中返回一个GestureDetector组件，并设置onTap属性为一个空函数。这样当点击底部弹框的遮罩层时，由于空函数没有具体的操作，弹框就不会关闭。下面是示例代码: ``` showModalBottomSheet( context: context, builder: (BuildContext context) { return GestureDetector( onTap: () {}, child: Container( // 弹框内容 ), ); }, ); ``` 通过这种方式，你可以在弹框中进行一些操作，并手动触发关闭弹框。请注意，这个方法适用于Flutter中的ModalBottomSheet组件。同时，也可以使用Listener widget来监听原始触摸事件，并进行相应的处理。可以使用Listener的onPointerDown属性来监听手指按下事件，然后通过setState方法来改变弹框的状态。具体代码可以参考中的示例。另外，在Flutter中也可以直接使用showModalBottomSheet来自定义底部选择器，这样可以更灵活地实现你的需求。希望这些方法可以帮助到你。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Flutter中showModalBottomSheet点击内容区域自动关闭Dialog解决](https://blog.csdn.net/u012766656/article/details/130472170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Flutter技术点-showModalBottomSheet关闭](https://blog.csdn.net/u011511921/article/details/106625970)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [flutter 中监听滑动事件](https://download.csdn.net/download/weixin_38666300/14025486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值