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 TreeElement TreeRenderObject 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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值