Flutter基本结构

Flutter基础结构

Flutter是谷歌的移动UI框架，用于在创纪录的时间内在iOS和Android上制作高质量的本地界面。Flutter与现有代码一起工作，被世界各地的开发人员和组织使用，并且是免费和开源的。可以看出flutter是移动UI框架，和系统没有太大的关系。下面我看看flutter的架构图：

图片1.png

从架构图可以看出其就分为两个部分，Framework和Engine部分。其中Framework提供了各种基础的组件库，Engine部分渲染各种widget，两者共同作用，使得运行性能高效稳定。

• Framework部分
  这一部分最底层是Foundation，也就是与Engine引擎相关的一些方法api，上一层就是动画绘制还有手势相关，其次才是Rendering相关，然后才是我们Flutter重要Widget，可以看出动画手势绘制都会重新出发render，Widget才会重新绘制。在Widget之上有两种设计的风格分别是iOS的Cupertino与Android的Material两种风格的组件库。

• Engine部分
  底下引擎部分就是Flutter与Cordova、Ionic、AppCan、Dcloud、APICloud、React Native这些框架最根本不同的地方，Flutter不是使用标准Web技术，而是借助可移植的图形加速渲染引擎、高性能的本地ARM代码，并以此实现跨设备、跨平台的高质量用户体验。

  
  
  图片2.png
  
  

  可以看出Dart维护的UI线程，其中我们我们用到的Widget树在使用GPU线程进行绘制。最后回调到Skia中后到GPU去工作。这种方式其实是和原生是一样的，性能是可以与原生App一模一样的。不仅于此，Google还对这一部分做了优化操作，让其性能超过了原生。可以看看RN的绘制过程：

  
  
  图片3.png
  
  学过RN的都知道它是用了JSX语法，那么JSX语法是什么？传统的Web应用中会有成千上万数量个DOM节点，所以更新的时候会非常琐碎、频繁，使页面加载缓慢，所以现代的Web应用开始使用虚拟DOM技术来提高页面更新的速度，用一个虚拟DOM，而不是直接调用类似.getElementById的方法，只操作JavaScript对象，然后再把更改的部分更新到真实DOM，这样是相当方便的。这就是JSX干的事情，这个其实也是借鉴了Android与iOS原生的思路，原生只不过不是DOM，而是虚拟控件，这样的设计速度快了很多，也是非常方便，但是添加了虚拟DOM意味着更多的代码，而且在一个DOM节点相对较少的页面中用虚拟DOM，实际上有可能会更慢。但是可以利用硬件性能来满足于解决这个问题。那么Flutter是如何做的？可以看下图：
  
  图片4.png
  
  在Flutter的响应式框架中，控件树中的控件直接通过可移植的图形加速渲染引擎、高性能的本地ARM代码进行绘制，不再需要通过虚拟DOM或虚拟控件、真实DOM或平台控件这些中间对象来绘制。Flutter响应式框架通过“无中间商赚差价”的方式直接利用硬件的所有性能，所以正如前面所说的，Flutter应用的性能比原生App更加优秀。

Flutter如何构建一个APP

通过创建的Flutter项目我们可以知道，整个程序的入口在一个叫main.dart文件中，这个文件的内如下：

void main() => runApp(Widget app);

这个很好理解，因为整个Flutter都是基于dart语言开发的，所以程序入口肯定也是在一个main函数中，main()函数中只调用runApp函数，使用runApp函数可以将给定的根控件填满整个屏幕。你可能会有疑问，为什么一定要使用runApp函数？如果不调用runApp函数，项目也可以正常执行，但是屏幕上什么都不会显示。Flutter是Dart语言的移动应用框架，runApp函数就是Flutter框架的入口，如果不调用runApp函数，那你执行的就是一个Dart控制台应用。可以看出启动一个flutter app其实就是创建一个dart的主线程，具体还得看binding.dart中的runApp函数这个函数，函数主要就是WidgetsFlutterBinding方法中的attachRootWidget绑定了传入的根目录的Widget。到后面一层层的初始化Widget树。