十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
可以使用 SingleChildScrollView 包裹布局
成都创新互联公司专注于企业营销型网站建设、网站重做改版、湘东网站定制设计、自适应品牌网站建设、H5响应式网站、商城开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为湘东等各大城市提供网站开发制作服务。
这里还需要了解一个 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 包裹,点击的时候收起键盘。
最后要记得销毁
1、点击输入flutter框弹出软键盘时,遮挡本输入框一部分。
2、点击输入框,输入框跟随软键盘自动上移时其他不该移动的内容也跟随上移导致的flutter键盘弹出时listview置底。
showModalBottomSheet 所弹出的内容高度是固定的。要想自适应自己布局的高度只需如下两点:
加入 isScrollControlled: true 后,弹窗高度会变成全屏的。接下来就是自己布局中的处理。
BottomPhotoDialog是我自己写的想要弹出的布局。在根节点中用SingleChildScrollView来包裹Column即可让弹窗高度适应布局高度
在android/app/build.gradle的android下加入
64-bit
32-bit
通过FlutterBugly.getUpgradeInfo()获取更新策略信息填入自定义flutter widget,手动弹窗
UpgradeInfo参数:
异常上报说明
1、flutter异常上报不属于崩溃,所以如需查看flutter的异常上报,请在【错误分析】tab页查看
2、iOS的异常上报没有过多测试,如出现问题请issue
目前已知问题
1、第一次接受到更新策略之后,不会弹窗,即使手动检查更新也不会,需要退出app之后再进入,才会有弹窗(已解决)
2、官方没有适配8.0的notification,所以如果需要用到notification的时候请关闭后(默认关闭),自己写相关业务逻辑,或者直接把gradle里的targetSdkVersion设成26以下(方法见示例)
如果你要手动操作的话,你可以选择截图,然后发送图片就可以了。
封装的弹窗必须要灵活,满足实际开发中的大部分弹窗,比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化~
共有四个文件: 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传送门: