Container介绍
如果组件需要一些背景样式、形状、尺寸限制就可以用Container来进行包裹子组件用于装饰和定位，所以Container 是一个组合类容器。它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。
示例代码
本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址
什么情况下使用Container？
当你需要对一个组件需要有多个限制时就用Container，比如需要通过对一个盒子同时进行固定大小、背景颜色、圆角设置等。
Container构造函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Container({
Key? key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(clipBehavior != null),
assert(decoration != null || clipBehavior == Clip.none),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'To provide both, use "decoration: BoxDecoration(color: color)".',
),
constraints =
(width != null || height != null)
? constraints?.tighten(width: width, height: height)
?? BoxConstraints.tightFor(width: width, height: height)
: constraints,
super(key: key);
Container属性和说明
| 字段 | 属性 | 描述 |
|---|---|---|
| color | Color | 盒子的背景颜色 |
| child | Widget | 子组件 |
| width | double | 盒子的宽度 |
| height | double | 盒子的高度 |
| alignment | AlignmentGeometry | 子组件的对齐方式 |
| padding | EdgeInsetsGeometry | 盒子的内边距 |
| margin | EdgeInsetsGeometry | 盒子的外边距 |
| decoration | Decoration | 盒子的背景装饰 |
| foregroundDecoration | Decoration | 盒子的前景装饰 |
| constraints | BoxConstraints | 盒子的额外约束 |
| transform | Matrix4 | 矩阵变化，类型为Matrix4，即四阶矩阵 |
| transformAlignment | AlignmentGeometry | 变换锚点的方向 |
| clipBehavior | Clip | 组件内容边缘的裁剪方式 |
Container详细使用
1、color、child
1
2
3
4
5
6
7
8
9
Container(
color: Colors.pink,
child: Text("Jimi",
style: TextStyle(
color: Colors.white,
fontSize: 30
),
),
)
效果展示
2、width、height
1
2
3
4
5
6
7
8
9
Container(
color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
),
效果展示
3、alignment
1
2
3
4
5
6
7
8
9
10
Container(
color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
),
效果展示
4、padding、margin
1
2
3
4
5
6
7
8
9
10
11
12
Container(
color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
),
效果展示
5、decoration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Container(
// color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.greenAccent,
// borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
]
),
),
),
效果展示
6、foregroundDecoration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Container(
// color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
foregroundDecoration: BoxDecoration(
color: Colors.greenAccent,
// borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.orange,
Colors.purple
]
),
),
),
效果展示
7、Constraints
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Container(
// color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.greenAccent,
// borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
]
),
),
constraints: BoxConstraints(
maxWidth: 100
),
),
效果展示
8、transform
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Container(
// color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.greenAccent,
// borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
]
),
),
transform: Matrix4.rotationZ(0.3),
),
效果展示
9、transformAlignment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Container(
// color: Colors.pink,
child: Text(
"Jimi",
style: TextStyle(color: Colors.white, fontSize: 30),
),
width: 200,
height: 200,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.greenAccent,
// borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
]
),
),
transform: Matrix4.rotationZ(0.3),
transformAlignment: Alignment.center,
),
效果展示
AnimatedContainer
它是Container的动画版本，比如我们需要在改变宽高、颜色、矩阵边换等需要增加动画效果时，那我们就使用AnimatedContainer
AnimatedContainer基本使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import 'package:flutter/material.dart';
class ContainerExample extends StatefulWidget {
@override
_ContainerExampleState createState() => _ContainerExampleState();
}
class _ContainerExampleState extends State<ContainerExample> {
var color = Colors.orange;
var width = 200.0;
var height = 200.0;
var matrix4Value = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ContainerExample"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedContainer(
width: width,
height: height,
color: color,
duration: Duration(milliseconds: 1000),
transform: Matrix4.rotationZ(matrix4Value),
),
Padding(
padding: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: (){
setState(() {
color = Colors.blue;
});
},
child: Text("改变颜色"),
),
),
Padding(
padding: EdgeInsets.all(0),
child: ElevatedButton(
onPressed: (){
setState(() {
width = 100;
height = 400;
});
},
child: Text("改变宽高"),
),
),
Padding(
padding: EdgeInsets.all(0),
child: ElevatedButton(
onPressed: (){
setState(() {
matrix4Value = 0.3;
});
},
child: Text("矩阵转换"),
),
)
],
),
),
);
}
}
效果展示
总结
Container 是一个组合型容器，当你需要对一个组件需要有多个限制时就用Container，上面介绍了Container的大小、位置、间距、装饰、限制、转换 等介绍。
AnimatedContainer则是在Container的基础上增加了动画效果。