Flutter

Flutter核心原理

底层绘制采用OpenGL，调用原生绘图接口，实现高性能

什么是UI框架?

由于操作系统直接操作API来绘制图片十分繁琐，将操作系统原生API封装在一个编程框架和模型中，再以一套简单的开发规则来开发GUI 应用程序，这一层抽象 就是我们所说的“UI框架”。

UI渲染流程

4棵树：Widget树=> Element树 => Render树=> Layer 树

1. 根据Widget树 生成Element树，Element树节点都继承自Element类
2. 根据Element树 生成Render树，Render树中的节点都继承自RenderObject类
3. 根据Render树生成Layer树，然后上屏显示，Layer树中的节点都继承自Layer类

Widget 介绍

widget 的功能是 “描述一个UI元素的配置信息”，在Flutter中万物皆为Widget。

Widget类本身是一个抽象类，其中最核心的就是定义了createElement()接口，在 Flutter 开发中，我们一般都不用直接继承Widget类来实现一个新组件，相反，我们通常会通过继承StatelessWidget或StatefulWidget来间接继承widget类来实现。

StatelessWidget

简介

用于不需要维护状态的场景 ，继承自Widget类，间接继承 Element类。

abstract class StatelessWidget extends Widget {
    const StatelessWidget({ Key key }) : super(key: key);
    
    @override
    StatelessElement createElement() => StatelessElement(this);
    
    @protected
  	Widget build(BuildContext context);
    //**context** 代表该Widget在整个Widget渲染树中的位置。
}

StatefulWidget

相比StatelessWidget 多了一个 createState() 接口

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
    
  @override
  StatefulElement createElement() => StatefulElement(this);
    
  @protected
  State createState();
}

• StatefulElement 间接继承自Element类，与StatefulWidget相对应（作为其配置数据）。StatefulElement中可能会多次调用createState()来创建状态（State）对象。
• createState() 用于创建和 StatefulWidget 相关的状态，它在StatefulWidget 的生命周期中可能会被多次调用。例如，当一个 StatefulWidget 同时插入到 widget 树的多个位置时，Flutter 框架就会调用该方法为每一个位置生成一个独立的State实例，其实，本质上就是一个StatefulElement对应一个State实例。

State

一个 StatefulWidget类 对应一个State类，表示StatefulWidget 需要维护的状态

1. 在 widget 构建时可以被同步读取。
2. 在 widget 生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。

State 中有两个常用属性：

1. widget，它表示与该 State 实例关联的 widget 实例，由Flutter 框架动态设置。注意，这种关联并非永久的，因为在应用生命周期中，UI树上的某一个节点的 widget 实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果 widget 被修改了，Flutter 框架会动态设置State. widget 为新的 widget 实例。
2. context。StatefulWidget对应的 BuildContext，作用同StatelessWidget 的BuildContext

Element

Element 就是Widget类在具体UI树上实例的一个对象，是Widget 与RenderObject

RenderObject

最具体的渲染对象，主要作用是实现事件响应和渲染管线中除 build 部分（build部分有Element实现）的实现。