简介

布局类组件都会包括一个或多个子组件,不同的布局类组件对子组件摆放(layout)方式不同。

Widget 阐明 用途
LeafRenderObjectWidget 非容器类组件基类 Widget树的叶子节点,用于没有子节点的widget,一般基础组件都归于这一类,如Image。
SingleChildRenderObjectWidget 单子组件基类 包括一个子Widget,如:ConstrainedBox、DecoratedBox等
MultiChildRenderObjectWidget 多子组件基类 包括多个子Widget,一般都有一个childrens参数,接受一个Widget数组。如Row、Column、Stack等

布局类组件便是指直接或直接承继(包括)SingleChildRenderObjectWidgetMultiChildRenderObjectWidget的Widget,它们一般都会有一个child或children特点用于接纳子 Widget。咱们看一下承继联系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。

RenderObjectWidget类中界说了创立、更新RenderObject的办法,子类有必要完成他们,关于RenderObject咱们现在只需要知道它是终究布局、烘托UI界面的目标即可,也便是说,对于布局类组件来说,其布局算法都是经过对应的RenderObject目标来完成的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,能够检查其对应的RenderObject的完成,比如Stack(层叠布局)对应的RenderObject目标便是RenderStack,而层叠布局的完成就在RenderStack中。

36、Flutter之布局类组件-布局类组件简介

Widget,Element 与 RenderObject

RenderObject归于底层烘托,一般项目开发很难接触到,实践项目中用的更多的是## Widget,Element,当然也要了解## Widget,Element 与 RenderObject的联系。 Element 是联系 Widget 和 RenderObject 的枢纽。

  • Widget – 存放烘托内容、视图布局信息
  • Element – 存放上下文信息,经过 Element 遍历视图树,Element 同时持有Widget和RenderObject
  • RenderObject – 根据 Widget 的布局特点进行 layout,对 widget 传入的内容进行烘托制作

首要经过一张图来看 Element 是怎么发挥其枢纽效果的:

36、Flutter之布局类组件-布局类组件简介

  • 每个 Widget 会创立一个对应的 Element 目标 (经过 Widget.createElement())
  • 每个 Element 会持有对应 Widget 目标的引证 (注意 createElement() 办法第一个参数)
  • RenderObjectElement 是 Element 的子类,这种 Element 持有一个 RenderObject 目标的引证

RenderObject

RenderObject是烘托树中的目标。

RenderObject类层次结构是烘托库存在的中心原因。

RenderObject有一个父目标,并且有一个名为parentData的插槽,父目标RenderObject能够在其间存储特定于子目标的数据,例如,子目标的方位。RenderObject类还完成了基本的布局和制作协议。

然而,RenderObject类没有界说子模型(例如,一个节点是否有0个、1个或多个子模型)。它也没有界说一个坐标体系(例如,子节点是在笛卡尔坐标中定位仍是在极坐标中定位等)或一个特定的布局协议(例如,布局是宽高向外,仍是巨细向外限制,或许父节点是在子节点布局之前仍是之后设置子节点的巨细和方位等);或许是否允许子节点读取父节点的parentData插槽)。

RenderBox子类引入了布局体系运用笛卡尔坐标的观念。 更多底层参考:api.flutter.dev/flutter/ren…

36、Flutter之布局类组件-布局类组件简介
本文正在参与「金石计划 . 分割6万现金大奖」