Flutter新锐专家之路：混合开发篇

作者：闲鱼技术-正物

本篇是此系列的第二篇，重点介绍如何让Flutter能够开发，实现业务需求。这部分包括:混合栈的管理，混合下的能力补齐和包管理。

混合栈的管理

引入Flutter之后，我们首要面临的问题便是混合栈的管理。如我们首先实践的是商品详情页，则有一个常见的应用场景:首页->详情页->详情页(猜你喜欢点击)->会话页->详情页(会话顶部点击)。如何去解决这种Native 与Flutter任意嵌套的问题呢？

解决方案应具有以下特点:

a.每一个页面都有一个VC(Activity)，保证所有基于VC(Activity)生命周期的逻辑(如埋点等)照常工作

b.不同的Flutter页面之间可以正常通信，共享数据

c.Native可以调起任意的Flutter页面，无论是首次打开还是之后

d.资源占用尽可能少，性能尽可能好

e.用户体验要同之前无差异

为了解决这些问题，设计如下:

a.所有的Flutter页面公用一个Flutter实例(FlutterViewController for iOS&FlutterNativeView for Android)

其中iOS可以透过addChildViewController和removeFromParentViewController，直接在FlutterViewController层面复用。

Android由于activity不能add/remove,因此抽取并复用了FlutterNativeView(相对应的FlutterView也是单例)，在不同的Activity上复用。

这种Flutter单例的实现带来的好处显而易见。一方面，单个Flutter实例因为位于相同的Isolate，其数据通信和共享将很容易。另一方面，引擎的默认实现中，每一个Flutter实例会新启动三个线程(IO,GPU和UI)，带来了额外的资源使用，单实例可以避免这个问题。

当然单例的实现也带来了额外的管理复杂度，但这个相关的复杂度我已经通过插件的方式支持了。

点击前往查看混合栈管理插件

b.每一个Flutter页面不仅是一个FlutterPage，也有一个对应的NativeVC(或Activity)与之相对应

通过唯一的id将其关联，可以方便地使Flutter/Native页面保持同步。如Native页面退到Idx时，可以通过Flutter内部的栈回退到对应idx的Flutter页面。

c.Native和Flutter都基于openUrl来管理页面跳转

统一的路由机制可以统一管理所有页面跳转相关逻辑，对业务侧提供标准一致的服务。

d.所有的页面跳转和动画都通过Native实现

因为原生(iOS/Android)自带跳转动画，而Flutter内部跳转也自带动画，为了用户体验，禁止Flutter内部跳转(push/pop)相关动画，统一由Native接管，这样用户就感受不到差异。

e.使用一个空白Widget作为RootWidget

以便保证Flutter页面完整退出时(如回到首页)，可以释放所有的Flutter详情页等资源

架构图如下:

效果图如下

##待优化部分 1.目前为了保证页面跳转时的正常显示，前一个页面是截图，后一个页面是真正的Flutter页面，也就是说每一个FlutterWrapperVC(Activity)都保留了一张截图，带来了额外的内存消耗。

复用Native组件

当前闲鱼Flutter业务全页面采用Flutter实现，但也有一些Native组件的复用。

通过Channel调用部分中间件

如埋点，网络请求与解析等只能调用已有的二方中间件，这种情况下基于Platform Channels去调用。

使用Dart重写部分中间件

对于一些有标准协议支持(如http)的中间件，如阿里云提供的基于http的文件上传服务，可以通过dart重写的方式去实现。

通过新Window方式，盖上已有的Native组件

如下图所示的浮层和键盘上的输入框，均为直接复用Native组件。

视频的实现

Flutter引擎通过Texture的方式，由Native侧提供相应的渲染内容(解码视频文件获得帧Buffer等)的方式来提供对于视频的支持。

Flutter的渲染流程略图

iOS上Flutter视频渲染逻辑:

Android上Flutter视频渲染逻辑:

包管理

构建和发布插件(包)

1.使用下面命令创建插件:

flutter create --template=plugin hybrid_stack_manager
复制代码

2.开发插件并在example中测试通过3.完善README.md, CHANGELOG.md，pubspec.yaml，podspec.json，LICENSE等相关文件 4.使用命令验证并发布

cd root-path-to-your-flutter-package
pub publish
复制代码

如果出现一个连接需要验证身份，拷贝到浏览器访问即可。

我们可以将实现的插件(如网络请求，混合栈管理等)包，Dart包(阿里云上传组件等)，以多种形式引入。下面以上文中的混合栈管理插件hybrid_stack_manager为例说明下各种包管理方式:

包名+版本

实现后可发布到https://pub.dartlang.org，再在pubspec.yaml中基于名称+版本号引入。

此部分包下载后路径位于:~/.pub-cache/hosted/pub.dartlang.org/hybrid_stack_manager-0.0.2

包名+git信息

也可以将代码包上传到可访问到的git地址，通过git地址+ref的方式引入。

此部分包下载后路径位于:~/.pub-cache/git/hybrid_stack_manager-d9f6bdf169683fd8642168ec37c5820940ed344a

包名+路径

也可以将代码放在某一文件夹(建议当前Flutter工程根目录之下)，通过路径引入。

写在后面

本文着重介绍了混合场景下如何去做业务研发。解决这一问题后，接下来就要解决实际业务开发中遇到的各种兼容性/稳定性问题，这些敬请关注本系列的上线篇。

有上面动图的demo

https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FFlutterRepo%2Fhybrid_stack_manager

作者：闲鱼技术
链接：https://juejin.im/post/5b764acb51882532dc1812b1
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Flutter开发之《新锐专家之路：混合开发篇》笔记（55)相关推荐

h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
kotlin与java混合开发_使用kotlin和Java混合开发Android项目爬坑记录
使用kotlin和Java混合开发Android项目爬坑记录不定期将开发过程中遇到的问题添加在此处,加深记忆. 主要内容包括但不限于java与kotlin语言的一些区别,以及在使用android-s ...
python语言开发平台_Go+Python双语言混合开发
装饰器的实质是什么?或者说为什么装饰器要写2层嵌套函数,里层函数完全就已经实现了装饰的功能为什么不直接用里层函数名作为装饰器名称? 答:装饰器是要把原来的函数装饰成新的函数,并且返回这个函数本身的高阶 ...
flutter 应用场景_Flutter混合开发的路由栈管理
为了把 Flutter 引入到原生工程,我们需要把 Flutter 工程改造为原生工程的一个组件依赖,并以组件化的方式管理不同平台的 Flutter 构建产物,即 Android 平台使用 aar.i ...
【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的热重启 / 热加载 )
文章目录前言一.混合开发中启用 Flutter 的热重启 / 热加载二.混合开发中 Flutter 的热重启 / 热加载命令测试三.指定混合应用连接的设备四.相关资源前言上一篇博客 ...
Android与Flutter混合开发
最近项目中需要在Android原生的应用中添加一些功能,时间紧,任务重,考虑再三,只有Android与Flutter混合才能按时完成.如上图所示,在Android页面中有些按钮需要在Android中跳 ...
前后端混合开发模式和前后端分离开发模式
前后端混合开发模式和前后端分离开发模式一.前后端混合开发模式二.前后端分离开发模式
混合开发Hybrid App为何成为热门？
纵观当前的移动开发,混合开发(Hybird App)的热度日益上升,那么导致这一趋势的是何原因呢? 实际上,除了混合开发,移动端的开发方式还有纯原生(Native App)和网页应用(Web App) ...
Ionic实现混合开发--探索之旅
混合开发是什么? 个人理解混合开发指的是编写一个项目将涉及原生APP的API封装成JS模块,以插件的形式可以引入或删除,从而可以实现利用HTML调用原生API,本质上是HTML调用封装API的JS模块 ...

Flutter开发之《新锐专家之路：混合开发篇》笔记（55)