RTC Dev Meetup:Flutter 开发实战与前景展望(四)

阅读数:26 2019 年 11 月 30 日 16:53

RTC Dev Meetup:Flutter 开发实战与前景展望(四)

2、 和 ReactNative 很有侵入性相比, Flutter 就很巧妙了。

如下图所示,安装过的插件会出现在 .flutter_plugins 文件中,然后通过读取文件,动态在 setting.gradle 和 flutter.gradle 中引入和依赖:

RTC Dev Meetup:Flutter 开发实战与前景展望(四)RTC Dev Meetup:Flutter 开发实战与前景展望(四)RTC Dev Meetup:Flutter 开发实战与前景展望(四)

所以这时候我们可以参考打包,修改我们的 gradle 脚本,利用 fat-aar 插件将本地 projcet 也打包的 aar 里。

RTC Dev Meetup:Flutter 开发实战与前景展望(四)

3、混合开发的最大痛点是什么?

肯定是堆栈管理!!! 所以项目开发了 flutter_boost 来解决这个问题。

  • 堆栈统一到了原生层。

  • 通过一个唯一 engine ,切换 Surface 渲染显示。

  • 每个 Activity 就是一个 Surface ,不渲染的页面通过截图缓存画面。

flutter_boost 截止到我测试的时间 2019-05-16, 只支持 1.2 之前的版本

RTC Dev Meetup:Flutter 开发实战与前景展望(四)

四、PlatformView

混合开发除了集成到原生工程,也有将原生控件集成到 Flutter 渲染树里里的需求。

首先我们看看没有 PlatformView 之前是如何实现 WebView 的,这样会有什么问题?

如下图所示,事实上 dart 中仅仅是用了一个 SingleChildRenderObjectWidget 用于占位,将大小传递给原生代码,然后在原生代码里显示出来而已。

RTC Dev Meetup:Flutter 开发实战与前景展望(四)

这样的时候必定会代码画面堆栈问题,因为这个显示脱离了 Flutter 的渲染树,通过出现动画肯定会不一致。

4.1 AndroidView

AndroidView -> TextureLayer,利用 Android 上的副屏显示与虚拟内存显示原理。

共享内存,实时截图渲染技术。

存在问题,耗费内存,页面复杂时慢。

这部分因为之前以前聊过,就不赘述了

三、Flutter Web

RN 因为是原生控件,所以在 react 和 react native 整合这件事上存在难度。

flutter 作为一个 UI 框架,与平台无关,在 web 上利用的是 dart2js 的能力。 比如 Image

  • 因为 Flutter 是一套 UI 框架,整体 UI 几乎和平台无关,这和 React Native 有很大的区别。(我在开发过程中几乎无知觉)

  • 在 flutterweb 中 UI 层面与渲染逻辑和 Flutter 几乎没有什么区别,底层的一些区别如: flutterweb 中的 Canvas 是 EngineCanvas 抽象,内部会借助 dart2js 的能力去生成标签。

  • React Native 平台关联性太强,而 Flutter 在多平台上优势明显。我们期待官方帮我们解决大部分的适配问题。

RTC Dev Meetup:Flutter 开发实战与前景展望(四)RTC Dev Meetup:Flutter 开发实战与前景展望(四)

Flutter 的平台无关能力能带来什么?

1、某些功能页面,可以一套代码实现,利用插件安装引入,在 web、移动 app、甚至 pc 上,都可以编译出对应平台的高性能代码,而不会像 Weex 等一样存在各种兼容问题。

2、在应用上可以快速实现“降级策略”,比如某种情况下应用产生奔溃了,可以替换为同等 UI 的 h5 显示,而这些代码只需要维护一份。

资源推荐
Github : https://github.com/CarGuo
RTC 开发者社区 : https://rtcdeveloper.com

本文转载自公众号声网 Agora(ID:shengwang-agora)。

原文链接:

https://mp.weixin.qq.com/s/GT3w6zjOmfh_0zRZkSkF6g

评论

发布