Flutter踩坑之路（三）一页面布局（宽高尺寸处理）

我们上篇博客讲了关于基础布局的知识，那么我们来讲一下关于宽高尺寸的处理。

宽高尺寸处理：

SizedBox(设置具体尺寸）

ConstrainedBox(限定最大最小宽高布局)

LimitedBox(限定最大宽高布局)

AspectRatio(调整宽高比)

FractionallySizedBox(百分比布局)

SizedBox(设置具体尺寸)

SizedBox组件是一个特定大小的盒子，这个组件强制它的child有特定的宽度和高度。如果宽度或高度为null，则此组件将调整自身大小以匹配该维度中child的大小。

SizedBox的主要属性

属性名	类型	说明
width	AlignmentGeometry	宽度值，如果具体设置了，则强制child宽度为此值；如果没设置，则根据child宽度调整自身宽度
height	double	高度值，如果具体设置了，则强制child高度为此值；如果没设置，则根据child高度调整自身高度

SizedBox的定义

const SizedBox({ Key key, this.width, this.height, Widget child })
    : super(key: key, child: child);

SizedBox的使用，示例代码如下所示:

 SizedBox(
        width: 200.0,//宽度为200
        height: 200.0,//高度为200
        child: Container(
          color: Colors.red,
          width: 100.0,
          height: 300.0,
        ),
      ),

效果如下图所示：

ConstrainedBox(限定最大最小宽高布局)

ConstrainedBox的作用是限定子元素child的最大宽度、最大高度、最小宽度和最小高度。

ConstrainedBox主要属性如下：

属性名	类型	说明
constraints	BoxConstraints	添加到child上的额外限制条件，其类型为BoxConstraints，BoxConstraints的作用就是限制各种最大最小宽高
child	Widget	子元素，任意Widget

ConstrainedBox的定义：

 ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
  }) : assert(constraints != null),
       assert(constraints.debugAssertIsValid()),
       super(key: key, child: child);

ConstrainedBox的使用，示例代码如下所示:

ConstrainedBox(
          constraints: BoxConstraints(
             maxHeight: 200,//最大高度
             maxWidth: 200,//最大宽度
             minHeight: 150,//最小高度
             minWidth: 150,//最小宽度
          ),
         child: Container(
            width: 400,
            height: 400,
            color: Colors.red,
         ),
      ),

效果如下图所示：

LimitedBox(限定最大宽高布局)

LimitedBox组件是限制类型的组件，可对最大宽高进行限制。和ConstrainedBox类似，不过没有最小宽高限制。

LimitedBox是将child限制在其设定的最大宽高中的，但这个限定是有条件的。当LimitedBox最大宽度不受限制的，child的宽度就会受到这个最大宽度的限制，高度同理。

LimitedBox组件主要属性如下所示：

属性名	类型	说明
maxWidth	double	限定的最大宽度，默认值是double.infinity
maxHeight	double	限定的最大高度，默认值是double.infinity

LimitedBox的定义：

const LimitedBox({
    Key key,
    this.maxWidth = double.infinity,
    this.maxHeight = double.infinity,
    Widget child,
  }) : assert(maxWidth != null && maxWidth >= 0.0),
       assert(maxHeight != null && maxHeight >= 0.0),
       super(key: key, child: child);

LimitedBox的使用，示例代码如下所示:

Row(
         children: [
            Container(
              width: 20,
               color: Colors.red,
            ),
           LimitedBox(
             maxWidth: 200,//最大宽度为200
             child: Container(
               color: Colors.green,
               width: 400,
             ),
           ),
         ],
      ),

效果图如下所示：

AspectRatio(调整宽高比)

AspectRatio的作用是根据设置调整子元素child的宽高比，AspectRatio适用于需要固定宽高比的情景。

AspectRatio的布局行为分为两种情况：

1.AspectRatio首先会在布局限制条件允许的范围内尽可能地扩展，Widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。

2.如果在满足所有限制条件后无法找到可行的尺寸，AspectRatio最终将会优先适应布局限制条件，而忽略所设置的比率。

AspectRatio属性如下表所示：

属性名	类型	说明
aspectRatio	double	宽高比，最终可能不会根据这个值去布局。
child	Widget	子元素，任意Widget

AspectRatio的定义：

 const AspectRatio({
    Key key,
    @required this.aspectRatio,
    Widget child,
  }) : assert(aspectRatio != null),
       super(key: key, child: child);

AspectRatio的使用，示例代码如下所示:

Container(
        width: 150.0,
        color: Colors.green,
        child: AspectRatio(
            aspectRatio: 1.5,
            child: Container(
               color: Colors.red,
            ),
        ),

效果如下图所示：

注：AspectRatio不能为null，其值必须大于0并且必须是有限的。

FractionallySizedBox(百分比布局)

FractionallySizedBox(百分比布局)组件会根据现有空间来调整child的尺寸，所以就算为child设置了具体的尺寸数值，也不起作用。当需要在一个区域里面取百分比尺寸时，可以使用这个组件，比如需要一个高度30%宽度60%的区域。

FractionallySizedBox的布局主要跟它的宽高因子（两个参数）有关，当参数为null或者有具体数值的时候，布局表现不一样。还有一个alignment参数，作为对齐方式进行布局。具体可分为以下两种情况：

1.设置了具体的宽高因子，具体的宽高则根据现有空间宽高*因子，当宽高因子大于1的时候，有可能会超出父组件的范围。

2.没有设置宽高因子，则填满可用区域。

FractionallySizedBox组件的属性如下表所示：

属性名	类型	说明
alignment	AlignmentGeometry	对齐方式，不能为null
widthFactor	double	宽度因子，宽度乘以这个值，就是最后的宽度
heightFactor	double	高度因子，高度乘以这个值，就是最后的高度

FractionallySizedBox的定义：

const FractionallySizedBox({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);

FractionallySizedBox的使用，示例代码如下所示:

Container(
         color: Colors.green,
         width: 200.0,
         height: 100.0,
        child: FractionallySizedBox(
           alignment: Alignment.topLeft,
           widthFactor: 1.5, //宽度因子
           heightFactor: 0.5, //高度因子
           child: Container(
              color: Colors.red,
           ),
        ),
      )

效果图如下图所示：

到这里关于宽高尺寸处理的讲解就结束，希望大家多多支持。