什么情况下使用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
主要用于对子控件的缩放、对齐方式、剪辑操作。