flutter图层,flutter 图片列表

Flutter面试：渲染原理

页面中的各界面元素（Widget）以树的形式组织，即控件树。Flutter通过控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。而渲染对象树在Flutter的展示过程分为三个阶段：布局、绘制、合成和渲染。

（一）布局

Flutter采用深度优先机制遍历渲染对象树，决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。在布局过程中，渲染对象树中的每个渲染对象都会接收父对象的布局约束参数，决定自己的大小，然后父对象按照控件逻辑决定各个子对象的位置，完成布局过程。

为了防止因子节点发生变化而导致整个控件树重新布局，Flutter加入了一个机制——布局边界（Relayout Boundary），可以在某些节点自动或手动地设置布局边界，当边界内的任何对象发生重新布局时，不会影响边界外的对象，反之亦然。

二）绘制

布局完成后，渲染对象树中的每个节点都有了明确的尺寸和位置。Flutter会把所有的渲染对象绘制到不同的图层上。与布局过程一样，绘制过程也是深度优先遍历，而且总是先绘制自身，再绘制子节点。

以下图为例：节点1在绘制完自身后，会再绘制节点2，然后绘制它的子节点3、4和5，最后绘制节点6。

可以看到，由于一些其他原因（比如，视图手动合并）导致2的子节点5与它的兄弟节点6处于了同一层，这样会导致当节点2需要重绘的时候，与其无关的节点6也会被重绘，带来性能损耗。

为了解决这一问题，Flutter提出了与布局边界对应的机制——重绘边界（Repaint Boundary）。在重绘边界内，Flutter会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。

重绘边界的一个典型场景是Scrollview。ScrollView滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。

（三）合成和渲染

终端设备的页面越来越复杂，因此Flutter的渲染树层级通常很多，直接交付给渲染引擎进行多图层渲染，可能会出现大量渲染内容的重复绘制，所以还需要先进行一次图层合成，即将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果，将相同的图层归类合并，简化渲染树，提高渲染效率。

合并完成后，Flutter会将几何图层数据交由Skia引擎加工成二维图像数据，最终交由GPU进行渲染，完成界面的展示。

四、总结

咱们从各种业界主流跨端方案与Flutter的对比开始，到Flutter的简要介绍以及Flutter的运行机制，并以界面渲染过程为例，从布局、绘制、合成和渲染三个阶段讲述了Flutter的实现原理。相信大家对Flutter已经有一个整体认知，赶快一起上手操作起来吧！

相关问答

Q1: Flutter性能优化

1.圆角对性能的影响

尽量避免用Clipxxx组件，建议用BoxDecoration的image属性实现，如果用Clipxxx组件，圆角取整后性能会提升。

2.减少重绘

根据场景合理使用RePaintBoundary，使绘制独立于父布局，避免重绘，提升性能，但过度使用增加的图层会带来Raster合成的耗时。例如scrollview是滑动过程会导致所有的节点都重绘，可以在scrollview下一层使用RePaintBoundary。

3.滚动步长插值器优化（了解）

官方的滚动差值器在出现小卡顿时，滚动步长会出现大的跳跃，导致体感上出现很明显的抖动，优化步长偏移量算法与原生效果对齐。

4.开启SurfaceView

官方推荐Flutter用SurfaceView ，因为SurfaceView与应用窗口内容分隔开，在专有硬件中合成，产生的中间副本少于TextureView，所以性能高，占用内存少，但是在混合栈遇到的问题需要突破

5.使用RepaintBoundary 提升频繁重绘控件的性能。使用RelayoutBoundary提升频繁修改大小，增删的布局中也可以提升性能。

6.build中不要去写大量的耗时逻辑，因为数据更新会触发build的多次调用，在里面做耗时逻辑会降低性能。

7.尽量使用statelessWidget代替statefulWidget，因为statefulWidget的销毁重建会引起子widget的销毁与重建。

8.解析json可以放到子线程线程中，开Isolate去解析，这样，当返回数据特别大的时候也不会阻塞界面。

9.使用不变的组件的时候可以添加const，const组件不会进行build更新

10.由于flutter通过widget.runtimeType和key来判断是否需要跟新组建，所以我们写组件的时候尽量保持key不变，或者不写key。对于一些需要频繁改变，例如新增、删除、排序的最好加上key。如果type一直，如果不写key容易导致，element无法区分新旧widget，导致无法更新。

Q2: Android 图形系统（Graphics）

本文将从三个方面介绍Android 图形系统。

图形系统提供绘图和图形处理支持。

Android 框架提供了各种用于 2D 和 3D 图形渲染的 API、图片解码库，以及各种Driver支持。

• 绘图API：2D引擎 Skia，3D引擎 OpenGL ES，RenderScript，OpenCV和Vulkan。

• 图片解码库：jpg，png，gif等。

应用开发者可通过三种方式将图像绘制到屏幕:

• Canvas : 2D图形API，Android View树实际的绘制者。

• OpenGL ES : 嵌入式设备的OpenGL 三维图形API子集。

• Vulkan :跨平台的2D和3D绘图引擎,Android 7.0后支持，NDK。

整个图形系统架构是一个生产者和消费者模式，五层依次介绍：

2D绘制：Canvas api / view 的子类 (button ,list)/自定义view

3D绘制：应用直接使用OpenGL 接口绘制图形(PixelFlinger对应的是openGl 1.0 ，GUP driver 对应的是2.0和3.0)

所有情况下的绘图都渲染到一个包含 GraphicBuffer的Surface上，当一块 Surface 显示在屏幕上时，就是用户所看到的窗口。

• Canvas：画布，2D图形API，Android View树实际的渲染者。

• Skia绘制：Android4.0之前默认使用，主线程通过CPU完成绘图指令操作，在复杂场景下单帧容易超过16ms导致卡顿。

WindowManagerService（WMS）窗口管理服务，管理系统中所有的窗口。

• 管理window （view的容器）

• Window与surface对应，一块显示区域。添加一个window，就是 WMS 为其分配一块 Surface 的过程。

Google 在Android source官网提示：

这里就对这些控件进行简单介绍：

Surface : Handle onto a raw buffer that is being managed by the screen compositor.

Surface 对应一块屏幕缓冲区。生产者是： SurfaceTexture、MediaRecorder 等，消费者是： OpenGL、MediaPlayer 或 CameraDevice等。每个window对应一个Surface。Canvas或OpenGL ES等最终都渲染到Surface上。

• Flutter在Android平台上也是直接渲染到Surface。例如：一个Activity/Dialog都是一个Surface，它承载了上层的图形数据，与SurfaceFlinger侧的Layer相对应。

Canvas（画布）实现由 Skia 图形库提供。为了确保两个客户端不会同时更新某个缓冲区，使用以下命令处理画布锁：

使用双缓冲机制，有自己的 surface，View只是一个透明的占位符，Surface可以在后台线程中绘制。双缓冲机制提高渲染效率，独立线程

绘制，提升流畅性。适合一些场景：需要界面迅速更新、UI绘制时间长、对帧率要求较高的情况。

提供访问和控制Surface 相关的方法 。通过SurfaceView的getHolder()函数可以获取SurfaceHolder对象，Surface 就在SurfaceHolder对象内。

addCallback(SurfaceHolder.Callbackcallback) /Canvas lockCanvas() /unlockCanvasAndPost(Canvascanvas)

SurfaceTexture： Surface 和 OpenGL ES (GLES) 纹理（Texture）的组合。将图像流转为 OpenGL 外部纹理。

TextureView：持有 SurfaceTexture，将图像处理为 OpenGL 纹理更新到 HardwareLayer。

GLSurfaceView：加入 EGL 管理，自带 GL 上下文和 GL 渲染线程

这些View通常涉及到Android音视频相关，需要高效的渲染能力。如下面的SurfaceTexture在camera中的应用。

简称Buffer, 一个Buffer包含一帧图像，Buffer由gralloc分配和回收。Buffer 属性包含：width, height, format, usage等

BufferQueue 的引入是为了解决显示和性能问题。

• Surface属于APP进程，Layer属于系统进程，如果它们之间只用一个Buffer，会存在显示和性能问题。

• 一些Buffer用于绘制，一些Buffer用于显示，双方处理完之后，交换一下Buffer，提高效率。

• BufferQueue中包含多个Buffer对象。

Android图形系统包含了两对生产者和消费者模型，它们都通过BufferQueue进行连接：

1.Canvas和OpenGL ES生产图形数据，SurfaceFlinger消费图形数据。

2.SurfaceFlinger合成所有图层的图形数据，Display显示合成结果。

code：frameworks/native/services/surfaceflinger

• Surface表示APP进程的一个窗口，承载了窗口的图形数据。

• SurfaceFlinger是系统进程合成所有窗口的系统服务，负责合成所有Surface提供的图形数据，然后送显到屏幕。

• SurfaceFlinger既是上层应用的消费者，又是Display的生产者，起到了承上启下的作用。

数据流：

合成示意图：

在介绍Vsync机制之前先介绍两个重要概念：

屏幕刷新率：屏幕每秒钟可以刷新多少次。60HZ刷新率，16.7ms刷新一次。（120HZ/8.3ms），硬件指标。

GPU 绘制帧率：GPU 每秒能够合成绘制多少帧。

软件层触发 View 绘制的时机是随机的，当下一次屏幕刷新时，屏幕从 Frame Buffer 中拿到的数据还是“帧1”的数据，导致“丢帧”。

每隔 16ms 硬件层发出 vsync 信号，应用层接收到此信号后会触发UI 的渲染流程，同时 vsync 信号也会触发 SurfaceFlinger 读取Buffer 中的数据，进行合成显示到屏幕上。

总结：Vsync机制将 CPU 和 GPU 的开始时间与屏幕刷新强行拖拽到同一起跑线

Android提供的Graphics流程相对比较复杂对其进行具象后的流程如下两张图所示：