`ConstrainedBox`

ConstrainedBox用于对子组件添加额外的约束,比如最小高度,通过constraints属性,BoxConstraints设置

const BoxConstraints({
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: 20,
            minWidth: 50,
            maxWidth: 100,
            maxHeight: 150,
          ),
          child: Container(
            width: 10,
            height: 200,
            color: Colors.red,
          ),
        ));
  }
}

最终显示是宽50,高150

`UnconstrainedBox`

UnconstrainedBox组件不对子组件做任何约束

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          width: 200,
          height: 200,
          child: UnconstrainedBox(
            child: Container(
              width: 300,
              height: 300,
              color: Colors.red,
            ),
          ),
        ));
  }
}

UnconstrainedBox虽然不限制其子控件的大小，但仍然受父控件的约束，超出父控件的区域将会截取。

`SizedBox`

SizedBox是具有固定宽高的组件

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SizedBox(
          ///无限大
          width: double.infinity,
          height: double.infinity,
        ));
  }
}

SizedBox可以没有子组件，但仍然会占用空间，所以SizedBox非常适合控制2个组件之间的空隙，指定宽或者高即可，当只指定宽或高，则没有指定的项默认为尽量大

静态构造方法

1、expand()

创建一个尽可能大的盒子

const SizedBox.expand({ Key? key, Widget? child })
  : width = double.infinity,
    height = double.infinity,
    super(key: key, child: child);

2、shrink()

创建一个空的盒子

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);

3、fromSize()

创建一个指定大小的盒子

SizedBox.fromSize({ Key? key, Widget? child, Size? size })
  : width = size?.width,
    height = size?.height,
    super(key: key, child: child);

`AspectRatio`

AspectRatio组件是固定宽高比的组件,比如一个宽高比为1:2的盒子

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: AspectRatio(
          aspectRatio: 1 / 2,
          child: Container(
            color: Colors.red,
          ),
        ));
  }
}

`FractionallySizedBox`

FractionallySizedBox 可以根据父容器宽高的百分比来设置子组件宽高,比如当前控件的宽度占父组件的50%

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          width: 300,
          height: 300,
          color: Colors.red,
          child: FractionallySizedBox(
            widthFactor: 0.5,
            heightFactor: 0.5,
            alignment: Alignment.topLeft,
            child: Container(
              color: Colors.blue,
            ),
          ),
        ));
  }
}

widthFactor和heightFactor 大小是0-1

`LimitedBox`

LimitedBox组件是当不受父组件约束时限制它的尺寸,比如列表中,一般是用于指定最大宽高，但需要注意的是，当父组件没有提供约束时，LimittedBox才生效

 ListView(
  children: <Widget>[
    LimitedBox(
      maxHeight: 100,
      child: Container(
        color: Colors.green,
      ),
    ),
    LimitedBox(
      maxHeight: 100,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)

FittedBox介绍

当子组件的内容超出父组件大小时，FittedBox 组件的作用是对子组件进行缩放和对齐方式的设置。

FittedBox属性和说明

字段	属性	描述
fit	BoxFit	子组件缩放位置调整
alignment	AlignmentGeometry	子组件对齐方式
clipBehavior	Clip	剪辑子组件内容的方式

FittedBox属性详细使用

1、fit

主要用于调整子组件缩放位置，关于位置的调整总共有7种，分别为fill contain cover fitWidth fitHeight none scaleDown，接下来我们说一下这七个属性分别代表什么效果。

1.1、fill

不等比例缩放，图片填充满整个控件

1.2、contain

等比例缩放，直到图片的高或者宽填充满控件

1.3、cover

等比例缩放，直到图片的宽和高都充满整个控件，图片可以超出控件的范围，但是会导致显示不完整。

1.4、fitWidth

等比例缩放，宽度充满

1.5、fitHeight

等比例缩放，高度充满

1.6、none

不等比例缩放，保留原始图片大小并居中显示

1.7、scaleDown

等比例缩放，两种缩放方式，第一种当图片大小大于控件时采用contain布局，第二种当图片宽高小于控件时采用none

2、alignment

alignment 主要是用于设置子组件的对齐方式，在Flutter深入浅出组件篇---Align、AnimatedAlign 可以看到更详细的介绍

3、clipBehavior

剪辑子组件内容，关于裁剪内容总共有4种，分别为none hardEdge antiAlias antiAliasWithSaveLayer，该属性主要配合贝塞尔曲线来使用，在后面的将绘图的时候在重点来讲，这里先简单概况一下4种属性的作用。

3.1、none

无模式裁剪，正常效果

3.2、hardEdge

不使用抗锯齿进行剪辑

3.3、antiAlias

使用抗锯齿进行剪辑

3.4、antiAliasWithSaveLayer

使用抗锯齿进行剪辑并在剪辑之后立即保存图层

Flutter入门-限制类容器

ConstrainedBox

UnconstrainedBox

SizedBox