Flutter组件--SizeBox、FittedBox(子组件超出父组件缩放和对齐)

什么情况下使用SizeBox?

我们知道按钮是不能设定宽度和高度的，如果我们需要自定按钮的宽度和高度，那么就可以用SizeBox 来进行限制。

1.SizeBox属性和说明

序列号	字段	属性	描述
1	width	double	盒子的宽度
2	height	double	盒子的高度

SzieBox方法和说明

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);

2.FittedBox介绍

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

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

FittedBox属性详细使用

1、fit

序列号	属性	描述
1	fill	不等比例缩放，图片填充满整个控件
2	contain	等比例缩放，直到图片的高或者宽填充满控件
3	cover	等比例缩放，直到图片的宽和高都充满整个控件，图片可以超出控件的范围，但是会导致显示不完整
4	fitWidth	等比例缩放，宽度充满
5	fitHeight	等比例缩放，高度充满
6	none	不等比例缩放，保留原始图片大小并居中显示
7	scaleDown	等比例缩放，两种缩放方式，第一种当图片大小大于控件时采用contain布局，第二种当图片宽高小于控件时采用none

2.alignment

alignment 主要是用于设置子组件的对齐方式

3.clipBehavior

序列号	属性	描述
1	none	无模式裁剪，正常效果
2	hardEdge	不使用抗锯齿进行剪辑
3	antiAlias	使用抗锯齿进行剪辑
4	antiAliasWithSaveLayer	使用抗锯齿进行剪辑并在剪辑之后立即保存图层

总结

SizeBox 主要用于限制子控件的大小，比如需要设定按钮的宽度和高度。

FittedBox 主要用于对子控件的缩放、对齐方式、剪辑操作。