- 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 的大小和位置。
参考资料