面试官，你有用过Flutter吗 Flutter架构是怎么样，为什么会比其他如ReactNative好，Flutter架构解析，为何它比React Native更好？我的使用经验分享

面试官询问候选人关于Flutter的使用经验及其架构优势。候选人表示曾使用过Flutter进行开发。Flutter架构采用跨平台方式，性能高效且开发速度快。相较于其他框架如React Native，Flutter在构建用户界面方面表现更优秀，其原生性能及热重载功能可提升开发效率和用户体验。Flutter还提供了丰富的组件和API支持，使得开发过程更为便捷。

3、Embedder是Flutter的一个嵌入层，负责将Flutter嵌入到各个平台，它的主要工作包括设置渲染Surface、线程设置以及插件等，这一层次的设计显示Flutter的平台相关层很低，平台（如iOS）仅提供一个画布，所有与渲染相关的逻辑都在Flutter内部完成，确保了跨端的一致性。

从架构图可以看出，Flutter从头开始构建了一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言，它依赖跨平台的Skia图形库实现渲染引擎，仅使用系统的图形绘制接口，这种设计最大限度地保证了不同平台、不同设备的体验一致性，逻辑处理则使用支持AOT的Dart语言，其执行效率远高于JavaScript。

1、2 万物皆Widget

当前主流的设计思想倾向于解耦各个UI控件，逐渐演变为组件化的思想。

Flutter控件主要分为两大类：StatelessWidget和StatefulWidget。

StatelessWidget用于展示静态的文本或图片，如果控件需要根据外部数据或用户操作进行变化，就需要使用StatefulWidget，State的概念来源于Facebook的流行Web框架React，在React风格的框架中，通过控件树和各自的状态构建界面，当某个控件的状态发生变化时，框架会对比前后状态差异，并采取最小代价更新渲染结果。

1、3 绘图基本原理

从相关图示可以看出，Flutter和React-Native的本质区别：React-Native只是扩展调用OEM组件，而Flutter则自行渲染。

Google提供的Flutter架构详解图中，详细解释了Flutter的原理：Flutter只关心向GPU提供视图数据，UI线程使用Dart构建抽象的视图结构，这份数据在GPU线程进行图层合成，然后提供给Skia引擎渲染为GPU数据，最后通过OpenGL或Vulkan提供给GPU。

Flutter并不关心显示器、视频控制器以及GPU的具体工作，它只关注GPU发出的VSync信号，尽可能快地在两个VSync信号之间计算并合成视图数据。

1、4 Flutter面试常见问题

了解Flutter的基本概念后，自然会遇到一些疑问。

1、4.1 为什么选择Dart？

Dart性能更佳，在JIT模式下，Dart的速度与JavaScript相当，但Dart支持AOT，当以AOT模式运行时，JavaScript便无法追赶，速度的提升对高帧率下的视图数据计算很有帮助。

Dart的Native Binding可以很好地通过Dart Lib实现，这在统一基础框架的代码模式上非常有用，而且Fuchsia OS内置的应用浏览器使用Dart作为App的开发语言，Flutter是Fuchsia OS应用框架的一个子集，Dart是类型安全的语言，拥有完善的包管理等诸多特性。

1、4.2 Skia是什么？为什么Flutter引入Skia？

前面提到，Flutter只关心如何构建视图抽象结构，向GPU提供视图数据，Skia就是Flutter向GPU提供数据的途径。

Skia是一个2D绘图引擎库，其前身是一个向量绘图软件，Chrome和Android都采用Skia作为绘图引擎，Skia提供了友好的API，在图形转换、文字渲染、位图渲染等方面都有高效表现，因为它是跨平台的，所以可以被嵌入到Flutter的iOS SDK中，而无需研究iOS闭源的Core Graphics / Core Animation。

Android自带了Skia，所以Flutter Android SDK比iOS SDK要小很多。

1、4.3 Flutter的架构是怎样的？

我们可能只知道Flutter做了什么，但还需要从侧面观察其整个架构设计，了解Flutter是如何运作的。

Flutter Framework是纯Dart实现的SDK，类似于React在JavaScript中的作用，它处理动画、绘图和手势，并基于绘图封装了一套UI组件库，根据Material和Cupertino两种视觉风格区分开来，这个纯Dart实现的SDK被封装为dart:ui的Dart库，使用Flutter写App时，直接导入这个库即可使用组件等功能。

Flutter Engine是纯C++实现的SDK，包括Skia引擎、Dart运行时、文字排版引擎等，它是Dart的一个运行时，可以JIT、JIT Snapshot或AOT模式运行Dart代码，在调用dart:ui库时，它提供Native Binding实现，这个运行时还控制VSync信号的传递、GPU数据的填充等，并负责把客户端的事件传递到运行时的代码。

在了解屏幕绘图的基本原理和Flutter的整体概念后，我们可以更详细地了解Flutter的实现原理，从入口点开始看Flutter的代码，由于应用框架大同小异，下文提及的Flutter代码即指代Flutter Engine的代码，而非Flutter Dart Framework代码。

要理解Flutter的原理，可以从应用的View Controller初始化开始看，在简单的应用中，会实例化一个Flutter project的抽象（简称project），project会初始化一个platform view的抽象实例，这个实例负责创建Flutter的runtime（简称engine），关于面试可能遇到的问题还有很多细节需要掌握和理解透彻。“部分省略不变，此外还有一些学习资源和建议省略不变的部分内容也保持不变以便为读者提供进一步的