Flutter Widgets体系结构

• Flutter的布局基于Widget，但渲染基于RenderObject，所以有些布局看着很深但是实际性能较高
• Flutter的布局从代码上看就是基于各个widget class的构造器，构造器的输入是(布局数据, 子Widget, 回调），其中布局数据用于确定自身的UI属性。
• Flutter的Widget分三类，不带孩子的，带一个孩子的和带多个孩子的。
• dart中有比较多的语法特性刚好适用于Flutter这样的布局模式
• StatelessWidget表示这个Widgets只有一个状态
• StatefulWidget表示这个Widgets有一个或多个状态

引用关键字

引用当前对象的属性或方法的关键字widget和this的区别

在Flutter的Dart语言中，`this`关键字被用来引用当前对象的实例成员（属性或方法）。其在大多数面向对象的编程语言中的使用方式相似。当你在类的方法中访问同一个类的另一个方法或变量时，可以使用`this`关键字，尤其是当参数名称与成员变量名相同，从而需要区分作用域时，也可以直接省略。在Flutter widget树构建方法（例如`build`方法）中，你可能需要访问当前widget的属性或调用它的方法。

状态

• 数据流动导致状态改变
• 状态是数据的表征
• 状态数一般能代表一个事物的复杂程度

三棵树

UI布局绘制的有三棵树分别是【Widget Tree, Element Tree, RenderObject Tree】, 可以对应理解为一个建筑工程中的【设计师，项目经理，建筑工人】。

Widget Tree

用于整体的布局的动态配置（statefulWidget）当然也可以是静态配置(statelessWidget)。是应用开发者根据业务需求写出来的

Element Tree

负责Widget的生命周期，管理父子关系。是Flutter本身自己实现的，其内部提供了动态操作树的能力，比如mount就是添加(挂载)树的根节点,deactivateChild就是移除孩子节点。另外每个Elmenet Tree中的节点都持有对应的Widget，这个Widget的引用用于管理Widget的生命周期比如initState,build等。

RenderObject Tree

负责确定大小并渲染。其和Widget Tree不是一对一的关系，因为有些Widget就是单纯的配置Widget,比如Expand

Flutter中测量，布局与渲染

• 布局方向：笛卡尔坐标系，方向也是手机(left, top)为原点
• 主轴： 主布局方向，比如Col主布局方向是竖向所以他的主轴就是竖向
• 交叉轴：垂直于主轴的另一个轴
• 紧约束（Tight）：强制子布局的宽高
• 松约束（loose）：子布局的大小要在我的控制的范围内就行了

Flutter中的布局流程

• 上层widgetA向下层widgetB传递约束条件
• 下层 widget B向上层 widget A 传递大小信息
• 上层 widget A 决定下层 widget B 的位置

所以，widget 通常情况下 不能任意获得其想要的大小。在不考虑整棵树的情况下，几乎不可能精确定义任何 widget 的大小和位置。

参考资料

图解Flutter Widgets体系结构 - 知乎 (zhihu.com)