Flutter框架详解

1. Flutter介绍

Flutter是Google打造的高性能、跨平台的UI框架。它可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用；给用户提供漂亮、无平台区分的app体验。

Flutter是如何做到这一点的呢？它的框架结构是怎么样的呢？接下来，主要介绍Flutter框架的总览。

2. Flutter体系架构

Flutter被设计成一个可扩展，分层的系统。它包含了一系列依赖其下层的独立库。其示意图见下图。

其中，framework层中的每一个组件均是可选的和可以代替的。从上图可知，Flutter系统总共可以分为三层。上层的框架（Framework），中层的引擎（Engine），以及底层的嵌入层（Embedder）。

• 框架（Framework）：框架层是纯dart语言实现的一个响应式框架，开发者平常需要通过该层和Flutter系统交互。

• 引擎（Engine）：引擎层绝大部分是用C++实现的，其为Flutter系统的核心。引擎提供了一系列Flutter核心API的底层实现，例如图形（通过Skia），文字布局，文件等，是连接框架和系统（Andoird/iOS）的桥梁。

• 嵌入层（Embedder）：嵌入层基本是由平台对应的语言实现的，例如：在Android上是由Java和C++实现；在iOS是由Objective-C/Objective-C++实现。嵌入层为Flutter系统提供了一个入口，Flutter系统通过该入口访问底层系统提供的服务，例如输入法，绘制surface等。

其中，Framework是我们这一系列文章主要关注的部分。从下到上，其主要包括：

• 基础模块（foundational）及基础服务，例如animation，painting，以及gestures，这三种基础服务是为了方便上层调用对基础模块的抽象。

• Rendering 层，为处理图层提供了抽象组件。通过这一层，你能构建一棵可绘制对象的树。你可以动态操作这些对象，这棵树可以根据你的修改自动更新这棵树。

• Widgets层，是组件的抽象。每个render对象都有对应的widget对象。除此之外，widgets层允许你定义你能重复使用的组合组件。同时，此层引入了响应式编程模型。

• Material和Cupertino库提供了一系列Material和iOS设计风格的组件。

3. 不同跨平台技术对比

市面上有很多对比不同跨平台技术的文章，例如Flutter实战中的移动开发技术简介。本文以表格形式简单介绍一下不同跨平台技术的特点和优劣势等，然后说明一下flutter性能能媲美原生应用的原因。

目前市面上主要有H5+原生，JavaScript+原生渲染，自绘UI+原生。三种跨平台技术，其对比结果如下。

由图可见，Flutter最大的优势，是其出色的性能。根据Google官方的宣传，其性能是可以媲美原生的。这一点我们可以通过以下结构示意图看出来。

原生应用是由其框架直接通过Skia调用GPU进行绘制，但是RN等JavaScript+原生渲染跨平台技术是需要由其框架先调用原生框架，再通过原生框架调用Skia，最后调用至GPU进行绘制的。因此，其调用步骤上相对于原生多了一层，理论上其绘制性能将比原生差。

但是Flutter则不同，由于其应用也是由Flutter框架直接通过Skia调用GPU进行绘制，因此只要其框架的性能能媲美原生框架的性能，则其绘制性能就可以媲美原生。不仅如此，由于Skia是Flutter自带的，其升级非常方便，而Android系统相对而言升级比较缓慢，因此如果Flutter使用了更高性能的Skia库，其绘制性能甚至可能超过原生。

4.自底向上地分析Flutter的每一层

• Embedder
  Embedder 顾名思义是将Flutter嵌入到Native平台，例如Android，IOS，乃至Linux，Windows。 Embedder的职责是为渲染UI到Surface、处理单击事件等与底层平台交互的行为提供一个入口。Embedder 使用的语言取决于具体平台，对Android来说，通常是C++和Java。

• Engine
  Engine是Flutter的核心部分，大部分代码由C++构成。Engine的主要职责是为Flutter合成并渲染屏幕数据，并为此提供了一系列底层基础能力，包括图形绘制（通过Skia）、文字渲染、文件和网络I/O、无障碍支持、平台插件、Dart运行时管理和编译期工具链等。Engine的主要功能通过 dart:ui模块和Framework进行双向交互。

• Framework
  通常开发者不需要感知Embedder和Engine层的存在（如果不需要调用平台的系统服务），Framework是开发者直接交互的，因而也在整个分层架构模型的最上层。Framework是有Dart语言开发，提供了一套现代的、响应式的UI框架，Framework本身也是分层的，自底向上的角色和功能介绍如下。

1. Foundation以及Animation、Painting和Gestures提供了Framework公用的底层能力，是对Engine的抽象与封装。

2. Rendering 主要负责Render Tree的Layout等操作，并最终将绘制指令发送到Engine进行绘制上屏。

3. Widgets是对Rendering的一种上层封装，Render Tree虽然能最终决定UI但是过于复杂，不适合开发者使用，Widgets通过组合的思想，提供了丰富的Widget组件供开发者使用。

4. Material 和 Cupertino 是对Widgets的进一步封装，Widgets提供的组件对开发者来说还是过于原始，因此这一层基于Android 和 IOS的设计规范提供了更完备的组件，以保证开发者开箱即用。