Flutter基本认知

硬件绘图基本原理

显示器是由一个个物理显示单元组成的，每一个单元称为一个物理像素点，而每一个像素点可以发出多种颜色，显示器的成像原理就是在不同的物理像素点上显示不同的颜色，最终构成完整的图像。

显示器颜色是由RGB三基色组成的，我们常说的一个像素点可以显示1600万的颜色，即2的24次方，即每个基本色（R、G、B）深度扩展直8 bit（位），颜色深度越深，所以显示的颜色越丰富。

为更新显示画面，显示器以固定的频率刷新，比如手机刷新频率是60Hz，当一帧图像绘制完毕后准备绘制下一帧时，发出VSync信号，这个信号用于同步CPU、GPU和显示器。

在计算机系统中，图像的显示需要 CPU、GPU 和显示器一起配合完成：CPU 负责图像数据计算，GPU 负责图像数据渲染，而显示器则负责最终图像显示。

CPU 把计算好的、需要显示的内容交给 GPU，由 GPU 完成渲染后放入帧缓冲区，随后视频控制器根据垂直同步信号（VSync）以每秒 60 次的速度，从帧缓冲区读取帧数据交由显示器完成图像显示。

Flutter UI 系统

Flutter 是重写了一整套包括底层渲染逻辑和上层开发语言的完整解决方案。这样不仅可以保证视图渲染在 Android 和 iOS 上的高度一致性（即高保真），在代码执行效率和渲染性能上也可以媲美原生 App 的体验（即高性能）。

它提供一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套跨多段代码，并不像WebView渲染那样需要JavaScript运行环境和CSS渲染器，所以不会有性能损失。

Flutter framework 架构图

Flutter 架构采用分层设计，从下到上分为三层，依次为：Embedder、Engine、Framework。

Embedder 是操作系统适配层，实现了渲染 Surface 设置，线程设置，以及平台插件等平台相关特性的适配。从这里我们可以看到，Flutter 平台相关特性并不多，这就使得从框架层面保持跨端一致性的成本相对较低。

Engine 层主要包含 Skia、Dart 和 Text，实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力，Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用，则是将它们组合起来，从它们生成的数据中实现视图渲染。

Framework 层则是一个用 Dart 实现的 UI SDK，包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，Flutter 还基于这些基础能力，根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。我们在开发 Flutter 的时候，可以直接使用这些组件库。

flutter 可以实现

跨平台（一套代码可以同时运行在iOS和Android平台）

高保真（一整套包括底层渲染逻辑和上层开发语言的完整解决方案）

高性能（代码执行效率和渲染性能媲美原生App的体验）