Flutter（48）：Layout组件之FittedBox
2020-10-12 本文已影响0人
starryxp
Flutter教学目录持续更新中
Github源代码持续更新中
1.FittedBox
按自己的大小调整其子widget的大小和位置。
2.
- fit = BoxFit.contain：
- alignment = Alignment.center：
- clipBehavior = Clip.hardEdge：
3.Alignment属性
- Alignment.topLeft = Alignment(-1.0, -1.0)：
- Alignment.topCenter = Alignment(0.0, -1.0)：
- Alignment.topRight = Alignment(1.0, -1.0)：
- Alignment.centerLeft = Alignment(-1.0, 0.0)：
- Alignment.center = Alignment(0.0, 0.0)：
- Alignment.centerRight = Alignment(1.0, 0.0)：
- Alignment.bottomLeft = Alignment(-1.0, 1.0)：
- Alignment.bottomCenter = Alignment(0.0, 1.0)：
- Alignment.bottomRight = Alignment(1.0, 1.0)：
- Alignment()
- Alignment.lerp()
这个属性之前在讲Container已经讲过了，传送门：Flutter（44）：Layout组件之Container
4.BoxFit
- BoxFit.contain：全图居中显示但不充满，显示原比例
- BoxFit.cover：图片可能拉伸，也可能裁剪，但是充满容器
- BoxFit.fill：全图显示且填充满，图片可能会拉伸
- BoxFit.fitHeight：图片可能拉伸，可能裁剪，高度充满
- BoxFit.fitWidth：图片可能拉伸，可能裁剪，宽度充满
- BoxFit.scaleDown：效果和contain差不多， 但是只能缩小图片，不能放大图片
5. FittedBox尺寸调节（约束）
- 如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整 child ，按照指定条件进行布局。例如使用Container包裹，Container的约束条件会传递给FittedBox。
- 如果没有外部约束条件，则跟 child 尺寸一样，指定的缩放和位置属性将不起作用。
6.例子
1602470521805.jpg
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FittedBox'),
),
body: Column(
children: [
Container(
width: 100,
height: 100,
color: Colors.amber,
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.fill,
child: Text('FittedBox'),
),
),
FittedBox(
child: Text('FittedBox'),
),
],
),
);
}
下一节：Layout组件之AspectRatio
