Flutter深入浅出组件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox

·  阅读 225

ConstrainedBox

ConstrainedBox介绍

主要目的是对其子组件添加额外的约束,有时候子组件需要自动调整宽度和高度,以达到最佳的适配设计,那么这时候使用ConstrainedBox 是最佳的选择。

示例代码

本文中很多效果都没有截图,可下载源代码运行项目 源代码地址,或者通过视频教程查看 视频教程地址

ConstrainedBox属性和说明

ConstrainedBox 只有两个属性,constraints 用来对子组件添加额外约束,child 被约束的子组件。

字段属性描述
constraintsBoxConstraints对子组件添加额外约束
childWidget被约束的子组件

ConstrainedBox基本使用

ConstrainedBox 的使用非常简单,接下来我们重点来关注BoxConstraints

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 100,
    minHeight: 30,
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),
  ),
)
复制代码

BoxConstraints

BoxConstraints介绍

BoxConstraintsRenderBox 布局的不可变布局约束,而 RenderBox 是二维笛卡尔坐标系中的渲染对象,想深入了解 RenderBox

BoxConstraints属性和说明

总共四个属性

字段属性描述
minWidthdouble最小宽度,默认0.0
maxWidthdouble最大宽度,默认double.infinity
minHeightdouble最小高度,默认0.0
maxHeightdouble最大高度,默认double.infinity

BoxConstraints基本使用

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 30,
    maxHeight: 100
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),
  ),
)
复制代码

BoxConstraints方法和说明

1、tight()

容器的宽度和高度取决于传进来的size,设定多大就是多大。

BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;
复制代码

2、tightFor()

宽度和高度是可选参数,在不传入的情况下能大则大,在传入参数时设定多大就是多大。

const BoxConstraints.tightFor({
  double? width,
  double? height,
}) : minWidth = width ?? 0.0,
     maxWidth = width ?? double.infinity,
     minHeight = height ?? 0.0,
     maxHeight = height ?? double.infinity;
复制代码

3、tightForFinite()

宽度和高度默认给最大值,在不传参数的时候能大则大,在传入参数的时候能紧则紧。

const BoxConstraints.tightForFinite({
  double width = double.infinity,
  double height = double.infinity,
}) : minWidth = width != double.infinity ? width : 0.0,
     maxWidth = width != double.infinity ? width : double.infinity,
     minHeight = height != double.infinity ? height : 0.0,
		maxHeight = height != double.infinity ? height : double.infinity;
复制代码

4、loose()

最大宽度和最大高度限定于传入的size,未超出能紧则紧

BoxConstraints.loose(Size size)
  : minWidth = 0.0,
		maxWidth = size.width,
		minHeight = 0.0,
		maxHeight = size.height;
复制代码

5、expand()

宽度和高度是可选参数,在不传入时依赖于父组件, 占用父组件剩余的全部空间,在传入时设定多大就是多大。

const BoxConstraints.expand({
  double? width,
  double? height,
}) : minWidth = width ?? double.infinity,
		 maxWidth = width ?? double.infinity,
		 minHeight = height ?? double.infinity,
		 maxHeight = height ?? double.infinity;
复制代码

UnconstrainedBox

UnconstrainedBox 不会对子组件产生任何限制,允许其子组件按照本身大小绘制,那么在我们的平时开发过程中用到该组件会相对较少,一般用于去除多重限制 的时候会有一些帮助。

比如AppBaractions 属性的按钮大小是固定的,如果想要修改就可以借助 UnconstrainedBox 去除父元素的限制。

AppBar(
  title: Text("ConstrainedExample"),
  actions: [
    UnconstrainedBox(
      child: Container(
        width: 20,
        height: 20,
        color: Colors.pink,
        child: IconButton(onPressed: () {}, icon: Icon(Icons.alarm), iconSize: 20, padding: EdgeInsets.zero,),
      ),
    ),
    IconButton(onPressed: () {}, icon: Icon(Icons.add)),
  ],
)
复制代码

总结

ConstrainedBox 会根据子组件的需要自动调整宽度和高度以达到最佳的适配效果,如果确切知道组件需要设定多少宽高那么ConstrainedBox 就不在适合。 BoxConstraintsConstrainedBox 额外增加的附加选项,尽可能达到业务需求。UnconstrainedBox 使用场景非常少,主要用于去除多重限制。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改