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

做者:闲鱼技术-正物android

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

混合栈的管理

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

解决方案应具备如下特色:

a.每个页面都有一个VC(Activity),保证全部基于VC(Activity)生命周期的逻辑(如埋点等)照常工做编程

b.不一样的Flutter页面之间能够正常通讯,共享数据json

c.Native能够调起任意的Flutter页面,不管是首次打开仍是以后浏览器

d.资源占用尽量少,性能尽量好bash

e.用户体验要同以前无差别网络

为了解决这些问题,设计以下:

a.全部的Flutter页面公用一个Flutter实例(FlutterViewController for iOS&FlutterNativeView for Android)架构

​ 其中iOS能够透过addChildViewController和removeFromParentViewController,直接在FlutterViewController层面复用。并发

ios-flutterviewcontroller-logic-behind

​ Android因为activity不能add/remove,所以抽取并复用了FlutterNativeView(相对应的FlutterView也是单例),在不一样的Activity上复用。

android-flutternativeview-logic-behind

​ 这种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详情页等资源

架构图以下:

hybrid-stack-manangement

效果图以下

iOS混合栈效果图
Android混合栈效果图

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

复用Native组件

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

经过Channel调用部分中间件

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

flutter-platform-channels

使用Dart重写部分中间件

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

经过新Window方式,盖上已有的Native组件

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

native-window-over-flutter-view

视频的实现

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

Flutter的渲染流程略图

flutter-render-with-texture-layer

iOS上Flutter视频渲染逻辑:

flutter-render-with-texture-layer-ios

Android上Flutter视频渲染逻辑:

flutter-render-with-texture-layer-android

包管理

构建和发布插件(包)

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中基于名称+版本号引入。

dart-pub-dependency-management-name+version

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

包名+git信息

也能够将代码包上传到可访问到的git地址,经过git地址+ref的方式引入。

dart-pub-dependency-management-name+git

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

包名+路径

也能够将代码放在某一文件夹(建议当前Flutter工程根目录之下),经过路径引入。

dart-pub-dependency-management-name+git

写在后面

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

联系咱们

若是对文本的内容有疑问或指正,欢迎告知咱们。

闲鱼技术团队是一只短小精悍的工程技术团队。咱们不只关注于业务问题的有效解决,同时咱们在推进打破技术栈分工限制(android/iOS/Html5/Server 编程模型和语言的统一)、计算机视觉技术在移动终端上的前沿实践工做。做为闲鱼技术团队的软件工程师,您有机会去展现您全部的才能和勇气,在整个产品的演进和用户问题解决中证实技术发展是改变生活方式的动力。

简历投递:guicai.gxy@alibaba-inc.com

相关文章
相关标签/搜索