Flutter 专题66 图解基本约束 Box#yyds干货盘点#

赋料扬雄敌，诗看子建亲。这篇文章主要讲述Flutter 专题66 图解基本约束 Box#yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜在学习过程中，为了调整或适配 Widget 大小时，会设置 Widget 或嵌套使用一些约束 Widget；小菜针对性学习一下这一系列的约束 Box；
SizedBox
源码分析

class SizedBox extends SingleChildRenderObjectWidget // 创建固定大小的约束Box const SizedBox( Key key, this.width, this.height, Widget child ) : super(key: key, child: child); // 创建父类允许最大尺寸的约束Box const SizedBox.expand( Key key, Widget child ) : width = double.infinity, height = double.infinity, super(key: key, child: child); // 创建父类允许最小尺寸的约束Box const SizedBox.shrink( Key key, Widget child ) : width = 0.0, height = 0.0, super(key: key, child: child); // 创建指定大小的约束Box SizedBox.fromSize( Key key, Widget child, Size size ) : width = size?.width, height = size?.height, super(key: key, child: child);

分析源码可知，SizeBox 继承自 SingleChildRenderObjectWidget 仅提供子 Child 的存储并不提供更新逻辑；且 SizedBox 提供了多种使用方法，小菜逐一尝试；
案例尝试 1. SizedBox( Key key, this.width, this.height, Widget child ) SizedBox 可自定义 width 和 height，当限制宽高时，子 Widget 无论宽高如何，均默认填充；通过设置 double.infinity 填充父类 Widget 宽高，注意此时父类要有限制，不可是无限宽高；当 width 和 height 未设置时，根据子 Widget 大小展示；

return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.teal.withOpacity(0.4))); return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.red.withOpacity(0.4), width: 200.0, height: 200.0)); return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.pink.withOpacity(0.4), width: 50.0, height: 50.0)); return SizedBox(width: double.infinity, height: 100.0, child: Container(color: Colors.blueAccent.withOpacity(0.4)));

文章图片

2. SizedBox.expand( Key key, Widget child ) .expand 是便捷方法，默认 width 和 height 均为 double.infinity，填充整个父类 Widget；

return SizedBox.expand(child: Container(color: Colors.blueAccent.withOpacity(0.4)));

文章图片

3. SizedBox.shrink( Key key, Widget child ) .shrink 同样是便捷方法，但 width 和 height 均为 0.0，无论子 Widget 设置多少均不展示；小菜暂时未想出此类方法的应用场景；

return SizedBox.shrink(child: Container(color: Colors.pink.withOpacity(0.4)));

4. SizedBox.fromSize( Key key, Widget child, Size size ) .fromSize 便捷方式与基本的构建方式基本相同，只是 width 和 height 由 Size 封装，小菜用此方法实现与基本方式相同的效果；

return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.teal.withOpacity(0.4))); return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.red.withOpacity(0.4), width: 200.0, height: 200.0)); return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.pink.withOpacity(0.4), width: 50.0, height: 50.0)); return SizedBox.fromSize(size: Size(double.infinity, 100.0), child: Container(color: Colors.blueAccent.withOpacity(0.4)));

文章图片

ConstrainedBox
源码分析

class ConstrainedBox extends SingleChildRenderObjectWidget ConstrainedBox( Key key, @required this.constraints, Widget child, )class BoxConstraints extends Constraints // 用指定的约束大小创建框架大小 const BoxConstraints( this.minWidth = 0.0, this.maxWidth = double.infinity, this.minHeight = 0.0, this.maxHeight = double.infinity, ); // 仅用指定大小创建框架大小 BoxConstraints.tight(Size size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height; // 用指定的约束大小创建框架大小 const BoxConstraints.tightFor( double width, double height, )// 创建需要给定宽度或高度的框约束，除非它们是无限的 const BoxConstraints.tightForFinite( double width = double.infinity, double height = double.infinity, )// 创建禁止大小大于给定大小的框约束 BoxConstraints.loose(Size size) : minWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height; // 创建扩展为填充另一个框约束的框约束 const BoxConstraints.expand( double width, double height, )

分析源码可知，ConstrainedBox 同样是继承自 SingleChildRenderObjectWidget；约束方式主要是对 constraints 的操作；相对于 SizedBox 约束更为灵活；
案例尝试 1. BoxConstraints() BoxConstraints 的构造方法可以设置最大最小宽度和高度四个属性，在实际场景中可以灵活运用；其约束的大小按照 minWidth < = child.width < = maxWidth & & minHeight < = child.Height < = maxHeight，当我们不设置宽高尺寸时，minWidth = 0.0 & & minHeight = 0.0 & & maxWidth = double.infinity & & maxHeight = double.infinity;

return ConstrainedBox(constraints: BoxConstraints(), child: Container(color: Colors.pink.withOpacity(0.4), child: _textWid(ConstrainedBox))); return ConstrainedBox(constraints: BoxConstraints(), child: Container(color: Colors.blueAccent.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints(minWidth: 100.0, minHeight: 100.0), child: Container(color: Colors.orange.withOpacity(0.4), child: _textWid(ConstrainedBox))); return ConstrainedBox(constraints: BoxConstraints(maxHeight: 100.0, maxWidth: 100.0),child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));

文章图片

2. BoxConstraints.tight(Size size) .tight 构造方法中需要传一个固定尺寸的 Size 其中 minWidth == maxWidth == size.width & & maxWidth == maxHeight == size.height；无论子 Widget 设置多大宽高均按照 Size 宽高约束；

return ConstrainedBox(constraints: BoxConstraints.tight(Size(110.0, 120.0)), child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));

文章图片

3. BoxConstraints.tightFor() 小菜理解 .tightFor 方式是 .tight 方式的细化，可以自定义 width 和 height；若宽高未设置，则最大宽高为无限，最小宽高为 0.0；若设置宽高则以设置尺寸进行约束；

return ConstrainedBox(constraints: BoxConstraints.tightFor(height: 110.0), child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints.tightFor(width: 110.0, height: 120.0), child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));

文章图片

4. BoxConstraints.tightForFinite() .tightForFinite 与 .tightFor 类似，默认最大宽高为无限，最小宽高为 0.0，其判断的是设置宽高是否为无限，不是 double.infinity 则 minWidth == maxWidth == width & & maxWidth == maxHeight == height 进行约束；

return ConstrainedBox(constraints: BoxConstraints.tightForFinite(), child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints.tightForFinite(width: 110.0, height: 120.0), child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));

文章图片

5. BoxConstraints.loose() .loose 方式限制给定 Size 大小，minWidth / minHeight 均为 0.0，最大宽高为 Size 大小；其中整体约束由 Size 限制，实际展示与子 Widget 大小相关；

return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 150.0)), child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 150.0)), child: Container(width: 200.0, height: 200.0, color: Colors.grey.withOpacity(0.6), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 120.0)), child: Container(width: 100.0, height: 100.0, color: Colors.green.withOpacity(0.6), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));

文章图片

6. BoxConstraints.expand() 大部分 .expand 方式是填充方式，默认填满父 Widget，若不设置宽高，默认 minWidth == maxWidth == double.infinity & & minHeight == maxHeight == double.infinity，使用时注意父类约束；

return ConstrainedBox(constraints: BoxConstraints.expand(), child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.))); return ConstrainedBox(constraints: BoxConstraints.expand(width: 110.0, height: 150.0), child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid(ConstrainedBox: A widget that imposes additional constraints on its child.)));