189 8069 5689

flutter双层弹窗,flutter border

Flutter实战巧之-showModalBottomSheet 高度自适应

showModalBottomSheet 所弹出的内容高度是固定的。要想自适应自己布局的高度只需如下两点:

我们提供的服务有:网站设计、网站制作、微信公众号开发、网站优化、网站认证、平罗ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的平罗网站制作公司

加入 isScrollControlled: true 后,弹窗高度会变成全屏的。接下来就是自己布局中的处理。

BottomPhotoDialog是我自己写的想要弹出的布局。在根节点中用SingleChildScrollView来包裹Column即可让弹窗高度适应布局高度

Flutter Boost 接入实践(iOS 篇)

本文将简单梳理一下 iOS 工程接入的 Flutter Boost 的流程,以作为前文的补充。

flutter_application_path = '../flutter_module'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'FlutterHybridiOS' do

install_all_flutter_pods(flutter_application_path)

end

接着在工程根目录下运行 pod install ,即可集成上 Flutter Module。看到我们的 Pods 中多了以下几个模块,即说明集成成功。

接着在工程根目录下运行 pod install ,即可集成上 Flutter Module。看到我们的 Pods 中多了以下几个模块,即说明集成成功。

这一块直接参照 Flutter Boost 官方提供的 example 就好了:

PlatformRouterImp.h:

PlatformRouterImp.m:

可以看到,Flutter Boost 支持常规 push,也支持打开模态弹窗,也支持手动 pop。

AppDelegate.h:

AppDelegate.m:

同样的,这里可在 Native 端用两种不同的方式去打开我们在 Flutter Module 中注册好的路由名。

至此,我们成功在 iOS 工程中接入了 Flutter Boost,那就开启我们的混编之旅吧~

Flutter 自定义弹窗组件

封装的弹窗必须要灵活,满足实际开发中的大部分弹窗,比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化~

共有四个文件: 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传送门:

一种更优雅的Flutter Dialog解决方案

系统自带的Dialog实际上就是Push了一个新页面,这样存在很多好处,但是也存在一些很难解决的问题

上面这些痛点,简直个个致命 ,当然,还存在一些其它的解决方案,例如:

很明显,使用Overlay可移植性最好,目前很多toast和dialog三方库便是使用该方案,使用了一些loading库,看了其中源码,穿透背景解决方案,和预期想要的效果大相径庭、一些dialog库自带toast显示,但是toast显示却又不能和dialog共存(toast属于特殊的信息展示,理应能独立存在),导致我需要多依赖一个Toast库

基于上面那些难以解决的问题,只能自己去实现,花了一些时间,实现了一个Pub包,基本该解决的痛点都已解决了,用于实际业务没什么问题

使用 FlutterSmartDialog 包裹下child即可,下面就可以愉快的使用SmartDialog了

使用Overlay的依赖库,基本都存在一个问题,难以对返回事件的监听,导致触犯返回事件难以关闭弹窗布局之类,想了很多办法,没办法在依赖库中解决该问题,此处提供一个 BaseScaffold ,在每个页面使用 BaseScaffold ,便能解决返回事件关闭Dialog问题

当时想解决穿透暗色背景,和背景后面的控件互动的时候,我几乎立马想到这俩个控件,先了解下这俩个控件吧

分析

这种方案,成功实现想要的穿透效果,这里了解下 behavior 的几种属性

有戏了!很明显translucent是有希望的,尝试了几次,然后成功实现了想要的效果

注意,这边有几个坑点,提一下

下面是写的一个验证小示例

这个库花了一些时间去构思和实现,算是解决几个很大的痛点

FlutterSmartDialog一些信息

状态管理

flutter版bugly已完成,欢迎使用

在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以下(方法见示例)


分享标题:flutter双层弹窗,flutter border
分享URL:http://cdxtjz.com/article/dsepgcc.html

其他资讯