Flutter架构理解

项目做得越多，越来越感觉框架底层的重要性，不说全部能看明白，但至少对自己用的技术框架由一个大的印象和概念

一、先来一张Flutter整体架构图

这就是flutter的整体框架结构了，当然我们其实重点关心Framework就可以了
1.Engine：c/c++实现，flutter的核心
2.Framework：由dart实现，我们开发就是在这一层

Framework中的执行流程(垂直流水式执行)

flutter中一个Vsync信号，flutter框架就会按照上图的顺序开始执行

• 第一阶段动画，动画每一帧都要改变
• 第二阶段构建，重新构建的widget
• 第三阶段布局，确定显示元素的大小，位置
• 第四阶段绘制，显示在屏幕上

二、Flutter中的三棵树

下面是我们程序中runApp，入口的源码

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..attachRootWidget(app)
    ..scheduleWarmUpFrame();
}

我们进入ensureInitiallzed可以看见WidgetsFlutterBinding 继承自BindingBase和混入了各种继承自BindingBase的类，那们BindingBase是什么呢？，点进去看看

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

可以看见BindingBase在构造中调用了initInstances，现在可以知道runApp的时ensureInitialized函数初始化了各种基本功能，比如GestureBinding手势，ServicesBinding场景等等

abstract class BindingBase {
  BindingBase() {
    developer.Timeline.startSync('Framework initialization');

    assert(!_debugInitialized);
    initInstances();
    assert(_debugInitialized);

    assert(!_debugServiceExtensionsRegistered);
    initServiceExtensions();
    assert(_debugServiceExtensionsRegistered);

    developer.postEvent('Flutter.FrameworkInitialization', <String, String>{});

    developer.Timeline.finishSync();
  }

attachRootWidget里面就是在创建根widget和和根element了，然后创建首帧

总的说来，runApp里面其实初始化了各种基本功能和服务之外，最重要的就是创建了下图的三棵树
我们在flutter最熟悉的就是Widget，其实Widget只是Elment的配置信息

Widget：只包含配置信息，非常轻量
Element：负责更新变化，Element其实就是我们模版代码stateful里面的BuildContext
RenderObject：负责渲染

另外widget在setState时其实是通过diff算法和key去判断界面是否发生变化