Flutter 66: 图解基本约束 Box (一)

阿策~ 2019-11-01

flutter SizedBox ConstrainedBox

      小菜在学习过程中,为了调整或适配 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 可自定义 widthheight,当限制宽高时,子 Widget 无论宽高如何,均默认填充;通过设置 double.infinity 填充父类 Widget 宽高,注意此时父类要有限制,不可是无限宽高;当 widthheight 未设置时,根据子 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 是便捷方法,默认 widthheight 均为 double.infinity,填充整个父类 Widget

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

3. SizedBox.shrink({ Key key, Widget child })

      .shrink 同样是便捷方法,但 widthheight 均为 0.0,无论子 Widget 设置多少均不展示;小菜暂时未想出此类方法的应用场景;

return SizedBox.shrink(child: Container(color: Colors.pink.withOpacity(0.4)));
4. SizedBox.fromSize({ Key key, Widget child, Size size })

      .fromSize 便捷方式与基本的构建方式基本相同,只是 widthheightSize 封装,小菜用此方法实现与基本方式相同的效果;

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 方式的细化,可以自定义 widthheight;若宽高未设置,则最大宽高为无限,最小宽高为 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.infinityminWidth == 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.')));


      Flutter 提供了多种约束 Box,所谓条条大路通罗马,同一种效果可以有多种实现方式,但小菜认为还是应该多多了解,尽量尝试最优方案;小菜对 Box 系列的研究还很浅显,有错误的地方请多多指导!

来源: 阿策小和尚

登录 后评论
下一篇
云栖号
7962人浏览
2020-03-04
相关推荐
0
0
0
353