本节目标

  • 基础用法
  • Padding 和 Margin
  • BoxDecoration 装饰
  • BoxShadow 阴影
  • RadialGradient 渐变

基础用法

Container 是一个组合类容器,它本身不对应具体的 RenderObject,它是 DecoratedBox、ConstrainedBox、Transform、Padding、Align 等组件组合的一个多功能容器,所以我们只需通过一个 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
Container({
Key key,
// 容器子Widget对齐方式
this.alignment,
// 容器内部padding
this.padding,
// 背景色
Color color,
// 背景装饰
Decoration decoration,
// 前景装饰
this.foregroundDecoration,
// 容器的宽度
double width,
// 容器的高度
double height,
// 容器大小的限制条件
BoxConstraints constraints,
// 容器外部margin
this.margin,
// 变换,如旋转
this.transform,
// 容器内子Widget
this.child,
})

BoxDecoration 装饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const BoxDecoration({
// 背景色
this.color,
// 背景图片
this.image,
// 边框样式
this.border,
// 边框圆角
this.borderRadius,
// 阴影
this.boxShadow,
// 渐变
this.gradient,
// 背景混合模式
this.backgroundBlendMode,
// 形状
this.shape = BoxShape.rectangle,
})

示例

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
Container(
constraints: BoxConstraints.expand(
height: 200.0,
),
margin: const EdgeInsets.all(20.0),
padding: const EdgeInsets.all(8.0),

// 背景色
// color: Colors.teal.shade700,

// 子Widget居中
alignment: Alignment.centerLeft,

// 子Widget元素
child: Text('Hello World',
style: Theme.of(context)
.textTheme
.display1
.copyWith(color: Colors.white)),

// 背景装饰
decoration: BoxDecoration(
// 背景色
color: Colors.blueAccent,
// 圆角
// borderRadius: BorderRadius.all(
// Radius.circular(20.0),
// ),
// 渐变
gradient: RadialGradient(
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98,
),
// 阴影
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(0, 2),
color: Colors.blue,
),
],
// 背景图
// image: DecorationImage(
// image: AssetImage('assets/flutter.png'),
// fit: BoxFit.cover,
// ),
// 背景混合模式
backgroundBlendMode: BlendMode.color,
// 形状
shape: BoxShape.circle,
),

// 前景装饰
// foregroundDecoration: BoxDecoration(
// image: DecorationImage(
// image: AssetImage('assets/flutter.png'),
// ),
// ),

// Container旋转
// transform: Matrix4.rotationZ(0.1),
),

代码

https://github.com/ducafecat/flutter-learn/blob/master/container_widget

参考


© 猫哥

https://ducafecat.tech