Ray 的记录站

日常开发实践记录

0%

Flutter 框架概述

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 保持界面流畅的技巧