Flutter 组件分析之SizedBox

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.
适宜人群: 入门

引语

SizedBox 是 Flutter 中较为常见的组件之一, 往往用于占位、描述控件尺寸等等. 本文将详细带你了解 SizedBox 在内部做了些什么?

命名方法

除了本身的构造函数外, SizedBox 一共有 4 个命名方法, 它帮助我们更加便携的构建 SizedBox 对象. 我们用一个表格来简述它们的功能:

名称	width	height	描述
SizedBox.expand	double.infintiy	double.infinity	在其父组件允许的范围内, 尽可能的大
SizedBox.shrink	0.0	0.0	在其父组件允许的范围内, 尽可能的小
SizedBox.fromSize	size.with	size.height	根据传入的 size 创建一个盒子
SizedBox.square	dimension	dimension	根据传入的 dimension 创建一个长宽相等的盒子

通过这四种命名方法, 我们已经可以解决大多数遇到的尺寸问题. 而 SizedBox 的构造方法便是最终查缺补漏了.

RenderObject

在创建 SizedBox 时, 我们最终返回的是 RenderConstrainedBox . 也就是一个具备约束属性的 RenderObject. 我们传入的 additionalConstraints , 则是我们创建时所申明的 width、height 构造的 BoxConstraints . 在 RenderConstrainedBox 中并没有重写 paint 方法. 说明会走默认的绘制方法不受影响. 我们主要看一下它更改的地方.

performLayout

在 performLayout 时, 如果没有 child , 尺寸会强行改为 Size.zero . 其实也可以理解, 这时的 SizedBox 在屏幕中并不会有显示仅占位. 如果有 child 时, child 会根据受 SizedBox 约束后的空间去布局 child. 这里 parentUsersSize 被赋值为 true, 说明当前的 SizedBox 会受 child 的尺寸影响, 在布局期间 SizedBox 需要获取 child 的尺寸信息.