Flutter框架体系结构

1 运行原理

在开发过程中，Flutter应用运行在一个虚拟机中，该虚拟机提供有状态的变化热重载，而不需要完全重新编译。发布时，Flutter应用直接编译成机器代码，无论是Intel x64，还是ARM指令，如果针对Web，则编译成JavaScript。该框架是开源的，采用允许的BSD许可证，并拥有一个繁荣的第三方包生态系统，补充核心库功能。

2 分层框架结构

Flutter被设计成一个可扩展的、分层的系统。它作为一系列独立的库存在，每个库都依赖于底层。任何一层都没有特权访问下面的一层，Framework层的每一部分都被设计成可选择和可替换的。

从下到上依次为：Embedder（嵌入器）、Engine、Framework。
如下图所示。

图1 分层框架结构图

2.1 Embedder

Embedder是嵌入层，做好这一层的适配 Flutter 基本可以嵌入到任何平台上去；

2.2 Engine

Flutter Engine是Flutter的核心，它主要是用c++编写的，支持所有Flutter应用程序。该引擎负责在需要绘制新帧时对合成的场景进行栅格化。它提供了Flutter核心API的底层实现，包括图形(通过Skia)、文本布局、文件和网络I/O、可访问性支持、插件架构、Dart运行时和编译工具链。

Flutter Engine通过dart:ui暴露给Flutter framework ，后者将底层C++代码包装在dart类中。这个库公开了最低层次的实现，比如驱动输入、图形和文本呈现子系统的类。

2.3 Framework

当我们通过 Dart 开发 Flutter 的应用程序的时候，我们通常都在 Flutter Framework 层工作(图中绿色的部分)。通常，开发人员通过Flutter Framework与Flutter交互，该框架提供了现代响应式框架，该框架是用Dart语言编写的。它包括一组丰富的平台、布局和基础库，这些库由一系列层组成。从下到上依次是:

• 基本的Foundational类，以及在底层基础上提供常用抽象的构建服务，如 Animation, Painting和Gestures为Dart实现的 UI 层，提供动画、手势及绘制。
• Rendering渲染层提供了处理布局的抽象。在运行时 Rendering 层会构建一个 Widget 树，当有变化时，会根据一定的算法计算出有变化的部分，然后更新 Widget 树。 控件的渲染主要包括三个阶段：布局（Layout）、绘制（Paint）、合成（Composite）。
• Widgets层Flutter提供的的一套基础组件库。Rendering Layer中的每个Rendering对象在Widgets Layer中都有一个对应的类。此外，Widgets Layer允许您定义可以重用的类的组合。在这一层将引入响应式编程模型。
• Material和Cupertino是Flutter提供的两种视觉风格的组件库。Material是Android风格的Widget，Cupertino是iOS设计风格的Widget。

那么Flutter Framework如何同其他代码在平台级别互动的呢？

Flutter Framework层通过一个抽象层— Window与Flutter Engine（图1蓝色部分）进行通信， 同时这个抽象层也暴露出一些列的 API 接口来和设备进行通信。
当发生以下事件时，Flutter Engine 会通知 Flutter Framework:

• 设备事件 (设备方向改变，设置修改，内存问题，APP状态修改等)
• 屏幕事件（如，手势）
• platform channel 发送数据
• 最主要的，Flutter Engine 准备好渲染新的帧了，会发送事件给 Flutter Framework

上面的讲解大家可能觉得有点抽象，因为是从过官方网站翻译获取的，所以听起来有点别扭。下面用一个用户操作流水说明一下，如图2所示。

图2 Flutter用户操作处理流水线

首先是获取到用户的操作，然后你的应用会因此显示一些动画，接着Flutter开始构建 Widget 对象。Widget对象构建完成后进入渲染阶段，主要包括三步：

• 布局元素：决定页面元素在屏幕上的位置和大小；
• 绘制阶段：将页面元素绘制成它们应有的样式；
• 合成阶段：按照绘制规则将之前两个步骤的产物组合在一起。

最后光栅化由 Engine 层来完成。

在渲染阶段，控件树（widget）会转换成对应的渲染对象（RenderObject）树，在 Rendering 层进行布局和绘制。具体的渲染原理会在后面的章节中详细讲解。

3 Flutter和iOS、Android 的交互

使用平台通道（Platform Channels）在 Flutter 工程和宿主（Native 工程）之间传递消息，主要是通过 MethodChannel 进行方法的调用，如下图3所示：

图3 Flutter和iOS、Android 的交互

从上图可以看出在Native和Flutter之间，数据的交互是双向的。我们可以从Native层调用Flutter层的dart代码，也可以在Flutter层调用Native的代码。
而作为通讯桥梁就是MethodChannel了，这个类在初始化的时候需要注册一个渠道值。这个值必须是唯一的，并且在使用到的Native层和Flutter层互相对应。

为了确保用户界面不会挂起，消息和响应是异步传递的，需要用 async 修饰方法，await 修饰调用语句。Flutter 工程和宿主工程通过在 Channel 构造函数中传递 Channel 名称进行关联。单个应用中使用的所有 Channel 名称必须是唯一的。具体交换和实现在后面的章节中会详细示例说明，在此不再做深入

Tip: 可以在 Channel 名称前加一个唯一的「域名前缀」。