十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
封装的弹窗必须要灵活,满足实际开发中的大部分弹窗,比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化~
成都创新互联专业为企业提供红河网站建设、红河做网站、红河网站设计、红河网站制作等企业网站建设、网页设计与制作、红河企业网站模板建站服务,十余年红河做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
共有四个文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart
弹窗主要调用类,主要包含: WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog
支持自定义配置背景颜色、字体大小、颜色、统一回调、自定义按钮、单独回调、是否带三角标志、任意位置、最大高度、超过可以滑动等~
部分展示效果:
支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等~
部分展示效果:
支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等~
部分展示效果:
中间、底部弹窗的弹窗widget
顶部弹窗的弹窗widget
顶部弹窗的数据源数据模型item
github传送门:
系统自带的Dialog实际上就是Push了一个新页面,这样存在很多好处,但是也存在一些很难解决的问题
上面这些痛点,简直个个致命 ,当然,还存在一些其它的解决方案,例如:
很明显,使用Overlay可移植性最好,目前很多toast和dialog三方库便是使用该方案,使用了一些loading库,看了其中源码,穿透背景解决方案,和预期想要的效果大相径庭、一些dialog库自带toast显示,但是toast显示却又不能和dialog共存(toast属于特殊的信息展示,理应能独立存在),导致我需要多依赖一个Toast库
基于上面那些难以解决的问题,只能自己去实现,花了一些时间,实现了一个Pub包,基本该解决的痛点都已解决了,用于实际业务没什么问题
使用 FlutterSmartDialog 包裹下child即可,下面就可以愉快的使用SmartDialog了
使用Overlay的依赖库,基本都存在一个问题,难以对返回事件的监听,导致触犯返回事件难以关闭弹窗布局之类,想了很多办法,没办法在依赖库中解决该问题,此处提供一个 BaseScaffold ,在每个页面使用 BaseScaffold ,便能解决返回事件关闭Dialog问题
当时想解决穿透暗色背景,和背景后面的控件互动的时候,我几乎立马想到这俩个控件,先了解下这俩个控件吧
分析
这种方案,成功实现想要的穿透效果,这里了解下 behavior 的几种属性
有戏了!很明显translucent是有希望的,尝试了几次,然后成功实现了想要的效果
注意,这边有几个坑点,提一下
下面是写的一个验证小示例
这个库花了一些时间去构思和实现,算是解决几个很大的痛点
FlutterSmartDialog一些信息
状态管理
可以使用 SingleChildScrollView 包裹布局
这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset
官方文档给出的解释就是处理键盘遮挡问题,默认是 true,如果不希望顶起需要设置为 false。
在 sdk 低版本的时候是使用 resizeToAvoidBottomPadding 需要将其设置为 false,现在已经弃用。但网上很多文章还没有改正,仍然用的 resizeToAvoidBottomPadding。
分两种情况
一种是使用系统的返回键,比如 android 底部导航自带的返回,
另一种是使用导航栏自定义的返回键
第一种情况需要在页面根布局使用 WillPopScope 在 onWillPop 中拦截返回处理。
原理都是通过判断输入框是否获取了焦点
当底部有固定的组件,比如提交按钮,我们在键盘弹起的时候希望按钮贴着键盘顶部固定,但是中间滚动视图可以自由滚动
可以在 SingleChildScrollView 外部再使用 Stack 包裹,悬浮按钮使用 Positioned 定位,
还要⚠️注意要给滚动组件底部留出距离防遮挡,同时还有动态加上 bottomBar 的高度,因为在 iphoneX 以上的手机,会有个虚拟按键,如果不加上该按键高度,同样会被遮挡
高度获取方法: MediaQuery.of(context).padding.bottom
在 showDialog 布局中使用 Scaffold 包裹,不要忘了将 backgroundColor 设为透明。
如果弹窗过高,还是需要将高度固定,然后使用 SingleChildScrollView ,弹窗中同样也可以在执行关闭的时候拦截,判断键盘是否弹起,如果弹起则要先关闭键盘。
给所有输入框绑定 FoucusNode
在 maxLines=1 的情况下,输入框不支持换行,换行按钮会变成 done
监听 onEditingComplete 方法
根布局使用 GestureDetector 或者 InkWell 包裹,点击的时候收起键盘。
最后要记得销毁