一、Flutter框架介绍
Flutter是Google在2018年发布的一款跨平台UI框架，使用Dart作为其开发语言，底层使用Skia图形库进行视图渲染，渲染速度和用户体验堪比原生。
二、Flutter渲染原理
Flutter中一帧的渲染可以分为三个过程：
-
请求渲染： 类似于React，Flutter中也是调用setState方法来通知刷新UI
- 调用setState方法，将需要刷新的RenderObject加入dirtyList中，
- 调用window对象scheduleFrame函数，scheduleFrame函数是一个native函数，Dart层只是一个函数声明，具体逻辑是在C++层实现，
- C++层的scheduleFrame函数会调用Animator对象进行RequestFrame，最终会通过JNI调用回到Java层，调用Android系统的Choreographer监听下一个Vsync信号。
-
绘制：
- Choreographer接受到下一个Vsync信号后，会执行之前注册回调函数，这里最终会调用到C++层Animator的DrawFrame函数，
- 在DrawFrame函数中会执行Dart环境中window对象的DrawFrame函数，
- 在window对象DrawFrame函数中调用flushLayout对RenderObjectTree进行测量和布局，然后调用flushPaint进行绘制，绘制结束后，会生成一颗LayerTree。
-
光栅化：
-
Dart层绘制结束后，会调用window的render方法将LayerTree同步到C++环境中，window的render也是一个native方法，具体的实现在C++层
-
C++层的Render方法会调用Animator对象的Render方法，在Render方法中会将LayerTree加入到LayerTreePipeLine中，这是一个典型的生产者消费者模式。
-
Dart UI线程负责将绘制好的LayerTree加入pipeline中，GPU线程负责从pipeline中获取LayerTree进行光栅化，pipeline中最多存在2个LayerTree。
-
CPU线程从pipeline中获取到LayerTree后，会调用Rasterizer的Draw方法进行光栅化，这里的光栅化实际上是通过递归遍历LayerTree将每一个Layer通过SKCanvas绘制到FrameBuffer
-
FlutterActivity启动时会创建GLContext，也就是OpneGL的上下文环境，当光栅化需要创建SKCanvas时，会通过GLContext获取FBO(FrameBufferObject)，然后通过FBO创建SKSurface，在通过SKSurface创建SKCanvas
-
当LayerTree绘制结束后，会通过SwrapBuffer方法将数据提交给显示器
-
三、Paint过程
Flutter的绘制主要包括两步：第一步是在Dart遍历执行RenderObject的paint方法，完成不同RenderObejct的绘制，生成一个LayerTree。第二步是在C++层将这颗LayerTree最终渲染到屏幕。
一个PictureLayer节点
- Dart层LayerTree的生成过程：
- 创建PictureLayer，添加到RootLayer，形成一个LayerTree，这里以只有两个节点的LayerTree为例
- 创建Dart层的Canvas对象，首先会在C++层创建SKPictureRecord，然后通过SKPictureRecord创建一个SKCanvas，Dart层的Canvas对象只是C++中SKCanvas对象的一个代理。Dart环境中在Canvas对象上所有绘制操作，都会被记录到SKPictureRecord里面
- 遍历RenderObjectTree，调用RenderObject对象的paint方法，不同的RenderObeject重写paint方法，通过Canvas对象，进行绘制自己
- 遍历结束后，调用SKPictureRecord的endRecording方法，结束记录，并且生成一个SKPicture对象，在Dart层对应一个Picture对象。SKPicture可以看一做是一帧屏幕截图，源码中SKPicture也是可以直接转成Image。
- 将Dart层生成的Picture对象赋值给PictureLayer，这样Dart层的LayerTree创建完成
- 将Dart层的LayerTree同步到C++，通过GPU线程进行光栅化处理。
- C++层渲染LayerTree
- FlutterActivity启动时，会在C++层完成GL环境的初始化和GLConetxt的创建
- FlutterSurfaceView的Surface创建完成后会同步到C++，通过这个Surface在C++层创建AndroidEGLSurface，作为GL的目标渲染Surface
- 通过AndroidEGLSurface创建SKSurface，在这个SKSurface上绘制的东西都会代理到AndroidEGLSurface
- 通过SKPicture创建SKCanvas，然后遍历LayerTree，通过SKCanvas绘制所有的Layer节点，完成光栅化处理，最终将光栅化后的数据刷新到手机屏幕上完成渲染。
绘制过程中真正复杂的是当界面需要重绘时，如何减少重绘范围，提高绘制性能。比如在上一节中，所有的RenderObject都绘制到了同一个PictureLayer上面，因此当RenderObjectTree中任何一个节点需要重绘时，都需要重新绘制整颗RenderObjectTree，生成新的Picture对象，绘制效率是非常低的。
Flutter中会对整个UI界面进行了图层划分，进行重绘时，可以通过图层复用，减少绘制量，提升绘制性能。
每个RenderObject都会有一个重新绘制边界(RepaintBoundary)的标记，表示该RenderObject是否需要在一个独立的图层进行绘制，比如下图，红色节点的RenderObject表示设置了RepaintBoundary标记，该RenderObject及其子节点都会绘制在一个独立的PictureLayer，整颗RenderObjectTree生成的LayerTree就会有两个PictureLayer节点，每一个PictureLayer节点都有自己独立的Canvas对象。当红色的RenderObject或者他的子节点需要进行重绘时，只需要重新绘制PictureLayer2然后在与之前生成的PictureLayer1进行合成即可。
