Flutter 框架概述

Flutter 总体架构如下所示:

Flutter 框架总体分为如下三个部分:

• Embedder: 负责初始化 Flutter Engine(引擎) 和相关线程(包括 Flutter 主线程, 消息通道线程等), 并将平台事件和引擎进行对接.
• Engine: 负责和平台之间的沟通, 同时负责渲染管线后续处理. 另外它会创建 DartVM, DartVM 创建后会调用 main 函数, main 函数在 Flutter 主线程中执行(和平台 APP 的 UI 线程不是同一个).
• Framework: 负责提供针对底层 Render Object 等的响应式封装, 管理 Element 树的创建/重建, 以及 Render Object 的更新等.

Framework 层和 Engine 层的通信使用 Binding 机制完成, 目前在 Flutter 中一共有八种 Binding, 详见后续内容.

一个打包好的 Flutter APP 中总是包含有这几层的代码(Flutter 编译时有摇树处理会自动删除未使用的框架代码, 不过这也造成在 Flutter 中 Dart 无法使用反射, 许多常规操作比如 JSON 解析都只有通过代码生成工具硬编码进行), 同时包含平台端容器 APP 的代码(比如安卓和 iOS 的原生端代码).

之后会以自底向上的方式逐步讲解 Flutter 的整个运行过程, 包括 build 是怎样触发的, InheritedWidget 是如何简化依赖注入工作的等内容.

大纲如下: (需要调整大纲的顺序, 这样便于从下往上和从上往下逼近讲解目标)

第一部分: 基础知识准备(包含 Flutter 的架构设计)

1. 一切的基础: 设备, 讲解 vSync 信号驱动显示更新的整个流程.
2. Engine 和 Framework 之间的接口: Window
3. Binding 概述
4. 生成下一帧(frame): 驱动 Flutter Framework

第二部分:

1. 两棵树: Element Tree & Render Tree
2. Render Tree 元素: RenderObject
3. Widgets: Flutter 开发核心
4. Element Tree 元素: Element

第三部分:

1. Flutter 帧绘制核心原理
2. 手势处理
3. 动画的处理过程
4. 下一帧绘制的完整流程(总结)

欠缺

• 无图无真相: 需要绘制一些图示说明.
• 通过从整体到局部的方式展开, 切勿一开始就掉到代码的细节中去.

参考

1. Flutter Internals
2. Flutter 内部运行原理
3. Inside Flutter
4. Inside Flutter 中文版
5. Flutter 实战
6. iOS 核心动画高级技巧(中文版)
7. 提升 iOS 界面渲染性能
8. 安卓图形显示系统
9. iOS 保持界面流畅的技巧