codecamp

Flutter实战 布局类组件简介

布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过 Widget 树来创建的(通过Widget.createElement()),Widget 其实就是 Element 的配置数据。在 Flutter 中,根据 Widget 是否需要包含子节点将 Widget 分为了三类,分别对应三种 Element,如下表:

Widget 对应的Element 用途
LeafRenderObjectWidget LeafRenderObjectElement Widget 树的叶子节点,用于没有子节点的 widget,通常基础组件都属于这一类,如 Image。
SingleChildRenderObjectWidget SingleChildRenderObjectElement 包含一个子 Widget,如:ConstrainedBox、DecoratedBox 等
MultiChildRenderObjectWidget MultiChildRenderObjectElement 包含多个子 Widget,一般都有一个 children 参数,接受一个 Widget 数组。如 Row、Column、Stack 等

注意,Flutter 中的很多 Widget 是直接继承自 StatelessWidge t或 StatefulWidget,然后在build()方法中构建真正的 RenderObjectWidget,如 Text,它其实是继承自StatelessWidget,然后在build()方法中通过RichText来构建其子树,而 RichText 才是继承自 MultiChildRenderObjectWidget。所以为了方便叙述,我们也可以直接说 Text 属于 MultiChildRenderObjectWidget(其它 widget 也可以这么描述),这才是本质。读到这里我们也会发现,其实 StatelessWidget 和 StatefulWidget 就是两个用于组合 Widget 的基类,它们本身并不关联最终的渲染对象(RenderObjectWidget)

布局类组件就是指直接或间接继承(包含)MultiChildRenderObjectWidget的 Widget,它们一般都会有一个children属性用于接收子 Widget。我们看一下继承关系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。

RenderObjectWidget类中定义了创建、更新RenderObject的方法,子类必须实现他们,关于RenderObject我们现在只需要知道它是最终布局、渲染 UI 界面的对象即可,也就是说,对于布局类组件来说,其布局算法都是通过对应的RenderObject对象来实现的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,可以查看其对应的RenderObject的实现,比如Stack(层叠布局)对应的RenderObject对象就是RenderStack,而层叠布局的实现就在RenderStack中。

在本章中,为了让读者对布局类 Widget 有个快速的认识,所以我们并不会深入到RenderObject的细节中去。在学习本章时,读者的重点是掌握不同布局组件的布局特点,具体原理和细节等我们对 Flutter 整体入门后,感兴趣的话再去研究。

Flutter实战 进度指示器
Flutter实战 线性布局(ROW和Column)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }