【Flutter学习】页面布局之宽高尺寸处理

一，概述　　

　　Flutter中拥有30多种预定义的布局widget，常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。按照《Flutter技术入门与实战》上面来说的话，大概分为四类

基础布局组件：Container(容器布局)，Center(居中布局)，Padding(填充布局)，Align(对齐布局)，Colum（垂直布局），Row（水平布局），Expanded（配合Colum，Row使用），FittedBox（缩放布局），Stack（堆叠布局），overflowBox(溢出父视图容器)。
宽高尺寸处理：SizedBox（设置具体尺寸），ConstrainedBox（限定最大最小宽高布局），LimitedBox（限定最大宽高布局），AspectRatio（调整宽高比），FractionallySizedBox（百分比布局）
列表和表格处理：ListView（列表），GridView（网格），Table（表格）
其它布局处理：Transform（矩阵转换），Baseline（基准线布局），Offstage（控制是否显示组件），Wrap（按宽高自动换行布局）

二，宽高尺寸处理

SizedBox（设置具体尺寸）
- 介绍　　
  比较常用的一个控件，设置具体尺寸。SizeBox组件是一个特定大小的盒子，这个组件强制它的chird有特定的宽度和高度，如果宽度和高度为null，则此组件将调整自身大小匹配该纬度中child的大小。
- 布局行为
SizedBox布局行为相对较简单：
- 继承关系
```
Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > SizedBox
```
- 构造方法
```
const SizedBox({ 
Key key, 
this.width, //宽
this.height, //高
Widget child //子组件
}) 
```
- 参数解析
  width：宽度值，如果具体设置了，则强制child宽度为此值，如果没设置，则根据child宽度调整自身宽度。
  
  height：同上。

ConstrainedBox（限定最大最小宽高布局）

介绍

这个控件的作用是添加额外的限制条件（constraints）到child上，本身挺简单的，可以被一些控件替换使用。Flutter的布局控件体系，梳理着发现确实有点乱，感觉总体思想是缺啥就造啥

布局行为

ConstrainedBox的布局行为非常简单，取决于设置的限制条件，而关于父子节点的限制因素生效优先级，可以查看之前的文章，在这里就不做具体叙述了。

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > ConstrainedBox

ConstrainedBox也是一个基础的布局控件。

构造函数
包含了一个constraints属性，且不能为null。

ConstrainedBox({

 Key key,

 @required this.constraints,

 Widget child

})

参数解析
constraints：
添加到child上的额外限制条件，其类型为BoxConstraints。BoxConstraints的作用是干啥的呢？其实很简单，就是限制各种最大最小宽高。说到这里插一句，double.infinity在widget布局的时候是合法的，也就说，例如. 想最大的扩展宽度，可以将宽度值设为double.infinity。

LimitedBox

（限定最大宽高布局）

介绍LimitedBox，通过字面意思，也可以猜测出这个控件的作用，是限制类型的控件。这种类型的控件前面也介绍了不少了，这个是对最大宽高进行限制的控件。

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > LimitedBox

构造函数

const LimitedBox({

  Key key,

  this.maxWidth = double.infinity,

  this.maxHeight = double.infinity,

  Widget child,

})

参数解析　
maxWidth：限定的最大宽度，默认值是double.infinity，不能为负数。

maxHeight：同上。

AspectRatio（调整宽高比）
- 介绍
  AspectRatio的作用是调整child到设置的宽高比，这种控件在其他移动端平台上一般都不会提供，Flutter之所以提供，我想最大的原因，可能就是自定义起来特别麻烦吧。
- 布局行为
  AspectRatio的布局行为分为两种情况：
  - AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。
  - 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率。
- 继承关系
```
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > AspectRatio
```
  从继承关系看，AspectRatio是基础的布局控件。
- 构造函数
```
const AspectRatio({

Key key,

@required this.aspectRatio,

Widget child

}) 
```
  构造函数只包含了一个aspectRatio属性，其中aspectRatio不能为null。
- 参数解析　
  aspectRatio：aspectRatio是宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，只是一个参考值。
　　
FractionallySizedBox（百分比布局）
FractionallySizedBox的布局行为主要跟它的宽高因子两个参数有关，当参数为null或者有具体数值的时候，布局表现不一样。当然，还有一个辅助参数alignment，作为对齐方式进行布局。
- 继承关系
```
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > FractionallySizedBox
```
- 构造函数
```
const FractionallySizedBox({

  Key key,

  this.alignment = Alignment.center,

  this.widthFactor,

  this.heightFactor,

  Widget child,

})
```
- 参数解析　
  alignment：对齐方式，不能为null。
  
  widthFactor：宽度因子，跟之前介绍的控件类似，宽度乘以这个值，就是最后的宽度。
  
  heightFactor：高度因子，用作计算最后实际高度的。
  
  其中widthFactor和heightFactor都有一个规则
  - 如果不为null，那么实际的最大宽高度则为child的宽高乘以这个因子；
  - 如果为null，那么child的宽高则会尽量充满整个区域。

三，常用方法

SizeBox（设置具体尺寸）

/**

 * MySizeBox

 */

class MySizeBox extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new Container(

      color: Colors.green,

      padding: const EdgeInsets.all(5.0),

      child: SizedBox(

        width: 200.0,

        height: 200.0,

        child: new Container(

          color: Colors.red,

          width: 100.0,

          height: 300.0,

        ),

      ),

    );

  }

}

效果图：

源码解析：
SizedBox内部是通过RenderConstrainedBox来实现的。具体的源码就不解析了，总体思路是，根据宽高值算好一个constraints，然后强制应用到child上。

ConstrainedBox（限定最大最小宽高布局）

/**

 * ConstrainedBox

 * 在一个宽高200.0的Container上添加一个约束最大最小宽高的ConstrainedBox，实际的显示中，则是一个宽高为150.0的区域。

 */

class MyConstrainedBox extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new ConstrainedBox(

      constraints: const BoxConstraints(

        minWidth: 100.0,

        minHeight: 100.0,

        maxWidth: 150.0,

        maxHeight: 150.0,

      ),

      child: new Container(

        width: 200.0,

        height: 200.0,

        color: Colors.red,

      ),

    );

  }

}

效果图：

源码解析：

@override

 RenderConstrainedBox createRenderObject(BuildContext context) {

 return new RenderConstrainedBox(additionalConstraints: constraints);

}

RenderConstrainedBox实现其绘制。其具体的布局表现分两种情况：

如果child不为null，则将限制条件加在child上；
如果child为null，则会尽可能的缩小尺寸。
具体代码如下：

@override

void performLayout() {

if (child != null) {

  child.layout(_additionalConstraints.enforce(constraints), parentUsesSize: true);

  size = child.size;

 } else {

  size = _additionalConstraints.enforce(constraints).constrain(Size.zero);

 }

}

使用场景：

需要添加额外的约束条件可以使用此控件，例如设置最小宽高，尽可能的占用区域等等。笔者在实际开发中使用的倒不是很多，倒不是说这个控件不好使用，而是好多约束因素是综合的，例如需要额外的设置margin、padding属性能，因此单独再套个这个就显得很繁琐了。

LimitedBox（限定最大宽高布局）

class MyLimitedBox extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new Row(

      children: <Widget>[

        new Container(

          color: Colors.red,

          width: 100.0,

        ),

        LimitedBox(

          maxWidth: 150.0,

          child: new Container(

            color: Colors.blue,

            width: 250.0,

          ),

        )

      ],

    );

  }

}

效果图：

源码解析：

先不说其源码，单纯从其作用，前面介绍的SizedBox、ConstrainedBox都类似，都是通过强加到child的constraint，来达到相应的效果。

我们直接看其计算constraint的代码

minWidth: constraints.minWidth,

maxWidth: constraints.hasBoundedWidth ? constraints.maxWidth : constraints.constrainWidth(maxWidth),

minHeight: constraints.minHeight,

maxHeight: constraints.hasBoundedHeight ? constraints.maxHeight : constraints.constrainHeight(maxHeight)

LimitedBox只是改变最大宽高的限定。具体的布局代码如下：

if (child != null) {

  child.layout(_limitConstraints(constraints), parentUsesSize: true);

  size = constraints.constrain(child.size);

} else {

  size = _limitConstraints(constraints).constrain(Size.zero);

}

根据最大尺寸，限制child的布局，然后将自身调节到child的尺寸。

使用场景：
是不可能清楚了，光是找例子，就花了不少时间。Flutter的一些冷门控件，真的是除了官方的文档，啥材料都木有。
谷歌说这个很有用，还是一脸懵逼。这种控件，也有其他的替代解决方案，LimitedBox可以达到的效果，ConstrainedBox都可以实现。

AspectRatio（调整宽高比）

/**

 * AspectRatio

 * 定义了一个高度为200的区域，内部AspectRatio比率设置为1.5，最终AspectRatio的是宽300高200的一个区域。

 */

class MyAspectRatio extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new Container(

      height: 200.0,

      child: new AspectRatio(

        aspectRatio: 1.5,

        child: new Container(

          color: Colors.red,

        ),

      ),

    );

  }

}

效果图：

源码解析：

@override

RenderAspectRatio createRenderObject(BuildContext context) => new RenderAspectRatio(aspectRatio: aspectRatio);

经过前面一些控件的解析，我想大家对这种构造应该不会再陌生了，绘制都是交由RenderObject去完成的，这里则是由RenderAspectRatio去完成具体的绘制工作。

RenderAspectRatio的构造函数中会对aspectRatio做一些检测（assert）

aspectRatio不能为null；

aspectRatio必须大于0；

aspectRatio必须是有限的。

接下来我们来看一下RenderAspectRatio的具体尺寸计算函数：

（1）如果限制条件为isTight，则返回最小的尺寸（constraints.smallest）；

if (constraints.isTight)

return constraints.smallest;

（2）如果宽度为有限的值，则将高度设置为width / _aspectRatio。如果宽度为无限，则将高度设为最大高度，宽度设为height * _aspectRatio；

if (width.isFinite) {

  height = width / _aspectRatio;

} else {

  height = constraints.maxHeight;

  width = height * _aspectRatio;

}

（3）接下来则是在限制范围内调整宽高，总体思想则是宽度优先，大于最大值则设为最大值，小于最小值，则设为最小值。

如果宽度大于最大宽度，则将其设为最大宽度，高度设为width / _aspectRatio；

if (width > constraints.maxWidth) {

 width = constraints.maxWidth;

 height = width / _aspectRatio;

}

如果高度大于最大高度，则将其设为最大高度，宽度设为height * _aspectRatio；

if (height > constraints.maxHeight) {

 height = constraints.maxHeight;

 width = height * _aspectRatio;

}

如果宽度小于最小宽度，则将其设为最小宽度，高度设为width / _aspectRatio；

if (width < constraints.minWidth) {

 width = constraints.minWidth;

 height = width / _aspectRatio;

}

如果高度小于最小高度，则将其设为最小高度，宽度设为height * _aspectRatio。

if (height < constraints.minHeight) {

 height = constraints.minHeight;

 width = height * _aspectRatio;

}

FractionallySizedBox（百分比布局）

/**

 * MyFractionallySizeBox

 */

class  MyFractionallySizeBox extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new Container(

      color: Colors.blue,

      height: 150.0,

      width: 150.0,

      padding: const EdgeInsets.all(10.0),

      child: new FractionallySizedBox(

        alignment: Alignment.topLeft,

        widthFactor: 1.5,

        heightFactor: 0.5,

        child: new Container(

          color: Colors.red,

        ),

      ),

    );

  }

}

效果图：

源码解析：
FractionallySizedBox内部具体渲染是由RenderFractionallySizedOverflowBox来实现的，通过命名就可以看出，这个控件可能会Overflow。

我们直接看实际计算尺寸的代码

double minWidth = constraints.minWidth;

double maxWidth = constraints.maxWidth;

if (_widthFactor != null) {

 final double width = maxWidth * _widthFactor;

 minWidth = width;

 maxWidth = width;

}

double minHeight = constraints.minHeight;

double maxHeight = constraints.maxHeight;

if (_heightFactor != null) {

 final double height = maxHeight * _heightFactor;

 minHeight = height;

 maxHeight = height;

}

源代码中，根据宽高因子是否存在，来进行相对应的尺寸计算。

使用场景：
当需要在一个区域里面取百分比尺寸的时候，可以使用这个，比方说，高度40%宽度70%的区域。当然，AspectRatio也可以达到近似的效果。

四，参考　　

《Flutter学习之认知基础组件》
《Flutter布局》