Flutter UI 系统

作者: Mariko00o | 来源:发表于2020-12-24 10:35 被阅读0次

UI系统可以理解为基于一个平台上实现GUI 的一个系统。平台就是操作系统，比如Android、iOS或者Windows、macOS，各个平台上的UI系统实现原理是相通的，从界面展示绘制到屏幕的上流程是相似的。下面我们先了解Flutter的框架系统，然后看看操作系统和系统底层的UI逻辑，以及Flutter UI系统和操作系统交互。

Flutter框架结构

Flutter框架的分层设计:

Flutter Framework: 是一个完全由 Dart 语言构建的 SDK，它实现了一整套自底而上的基础库。

底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。

Flutter Engine: 是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

硬件绘图基本原理

在了解原理之前先了解几个概念:

VSync
垂直同步信号,是Vertical Synchronization(垂直同步)的缩写，是一种在PC上很早就广泛使用的技术，可以简单的把它认为是一种定时中断。
系统每隔16ms发出VSYNC信号，触发对UI进行渲染，屏幕的刷新过程是每一行从左到右（行刷新，水平刷新），从上到下（屏幕刷新，垂直刷新）。当整个屏幕刷新完毕，即一个垂直刷新周期完成，会有短暂的空白期，此时发出 VSync 信号。
CPU
中央处理器，处理指令、执行操作、控制时间、处理数据等。主要用于基本数学和逻辑计算。
GPU
图形处理器,在设备上做图像和图形相关运算的工作。主要执行和图形处理相关的复杂的数学，如矩阵变化和几何计算，GPU的主要作用就是确定最终输送给显示器的各个像素点的色值。
屏幕显示图像的基本原理
我们知道显示器（屏幕）是由一个个物理显示单元组成，每一个单元我们可以称之为一个物理像素点，而每一个像素点可以发出多种颜色，显示器成相的原理就是在不同的物理像素点上显示不同的颜色，最终构成完整的图像。

为了更新显示画面，显示器是以固定的频率刷新（从GPU取数据），比如有一部手机屏幕的刷新频率是 60Hz。当一帧图像绘制完毕后准备绘制下一帧时，显示器会发出一个垂直同步信号VSync， 60Hz的屏幕就会一秒内发出 60次这样的信号。而这个信号主要是用于同步CPU、GPU和显示器的。

一般地来说，计算机系统中，CPU、GPU和显示器以一种特定的方式协作：CPU将计算好的显示内容提交给 GPU，GPU渲染后放入帧缓冲区，然后视频控制器按照同步信号从帧缓冲区取帧数据传递给显示器显示。

如果CPU/GPU在接收vsync信号之前，提前准备好下一帧要显示的内容，就能够及时准备好每一帧的数据，保证画面的流程。

image.png

如果vsync信号没有提醒CPU/GPU工作的情况下，第二次vsync到来需要显示内容时，CPU和GPU还没有来得及准备好下一帧的数据，所以只能接着显示上一帧的数据，产生Jank掉帧。

image.png

操作系统绘制API的封装

由于最终的图形计算和绘制都是由相应的硬件来完成的，比如CPU,GPU，而直接操作底层硬件的指令通常会被操作系统屏蔽，相应的操作系统会提供一些封装后的API给开发者调用，这些API比较基础，复杂和低效的，直接调用需要了解很多API的细节。

所以几乎所有用于开发GUI程序的编程语言都会在操作系统之上再封装一层，将操作系统原生API封装在一个编程框架和模型中，然后定义一种简单的开发规则来开发GUI应用程序，而这一层抽象，正是我们所说的“UI”系统，如Android SDK，iOS的UIKit 。对于Flutter就是我们的Flutter的UI系统，Flutter的框架。