浅析Flutter的架构设计

Posted 2021-06-05 君伟说

系统的了解Flutter开发，从了解Flutter系统架构开始。

Flutter作为目前跨平台开发领域的新秀，采用了和以往Web容器(例如Cordova,Ionic)及泛Web容器时代(ReactNative,Weex)截然不同的解决方案，它采用了自绘引擎方案。

• 渲染引擎依靠跨平台的Skia图形库来实现，Skia引擎将Dart构建的抽象视图结构数据加工成GPU数据，交给OpenGL最终提供给GUP渲染，完成渲染闭环，最大程度上保证了应用在不同平台、不同设备上的体验一致性

• 开发语言层面采用了Dart, 同时支持JIT和AOP, 保证了开发效率的同时，又提升了执行效率。

下面这是Google提供的Flutter整体架构设计图，Flutter architectural overview

从上图可以看到Flutter整体框架是采用分层设计的，自下而上分别是：Embedder层，Engine层，Framework层。

• Embedder层是操作系统适配层，实现了渲染Surface设置，线程设置，平台插件等特性适配。

• Engine层主要是包含Skia、Dart和Text，实现Flutter渲染引擎，文字排版，事件处理和Dart运行时等功能。Skia和Text为上层提供调用底层渲染和排版的功能，Dart提供了运行时调用Dart和渲染引擎的能力。引擎通过 dart:ui 暴露给 Flutter 框架，dart:ui 将底层 C++ 代码封装在 Dart 类中。该库公开了最低级别的基元，例如用于驱动输入、图形和文本渲染子系统的类。

• Framework层是一个用Dart实现的UI SDK， 包括动画，图形绘制，手势识别等功能。通过Material和Cupertino两种视觉设计风格封装了一套UI组件库，并将所有的设计通过Widgets小组件层进行了抽象封装，所以Flutter中，“一切都是Widget”。

Flutter通过自己的一套自绘引擎的方案实现了跨平台，在Google的大力推动下必将获得更大的发展。

推荐阅读：

--- End ---

君伟说