SizeBox介绍
SizeBox 是一个指定尺寸的盒子，一般用来限制子控件的大小，能强制子控件具有特定宽度和高度。
示例代码
本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址
什么情况下使用SizeBox?
我们知道按钮是不能设定宽度和高度的，如果我们需要自定按钮的宽度和高度，那么就可以用SizeBox 来进行限制。
SizeBox属性和说明
| 字段 | 属性 | 描述 |
|---|---|---|
| width | double | 盒子的宽度 |
| height | double | 盒子的高度 |
SizeBox属性详细使用
1、width、height
width 指定盒子的宽度，height 指定盒子的高度
完整代码
import 'package:flutter/material.dart';
class SizeBoxExample extends StatefulWidget {
@override
_SizeBoxExampleState createState() => _SizeBoxExampleState();
}
class _SizeBoxExampleState extends State<SizeBoxExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SizeBoxExample"),
),
body: Container(
child: SizedBox(
width: 200.0,
height: 300.0,
child: Card(child: Text('Hello World!')),
)
),
);
}
}
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);
FittedBox介绍
当子组件的内容超出父组件大小时，FittedBox 组件的作用是对子组件进行缩放和对齐方式的设置。
FittedBox属性和说明
| 字段 | 属性 | 描述 |
|---|---|---|
| fit | BoxFit | 子组件缩放位置调整 |
| alignment | AlignmentGeometry | 子组件对齐方式 |
| clipBehavior | Clip | 剪辑子组件内容的方式 |
FittedBox属性详细使用
1、fit
主要用于调整子组件缩放位置，关于位置的调整总共有7种，分别为fill contain cover fitWidth fitHeight none scaleDown，接下来我们说一下这七个属性分别代表什么效果。
1.1、fill
不等比例缩放，图片填充满整个控件
image
1.2、contain
等比例缩放，直到图片的高或者宽填充满控件
image
1.3、cover
等比例缩放，直到图片的宽和高都充满整个控件，图片可以超出控件的范围，但是会导致显示不完整。
image
1.4、fitWidth
等比例缩放，宽度充满
image
1.5、fitHeight
等比例缩放，高度充满
image
1.6、none
不等比例缩放，保留原始图片大小并居中显示
image
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
使用抗锯齿进行剪辑并在剪辑之后立即保存图层
总结
SizeBox 主要用于限制子控件的大小，比如需要设定按钮的宽度和高度。
FittedBox 主要用于对子控件的缩放、对齐方式、剪辑操作。
网友评论