Padding介绍
在应用程序中有许多widget 时，这个时候画面常常会变得很拥挤，这个时候如果想要在widget之间来保留一些间距，那就用 Padding
为什么使用 Padding 而不使用 Container.padding 属性的 Container?
Container 是将许多更简单的 widget 组合在一个方便的包中，如果只需要设置 padding ，那我们最好使用 Padding 而不是 Container
示例代码
本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址
Padding属性和说明
总共2个属性
| 字段 | 属性 | 描述 |
|---|---|---|
| padding | EdgeInsetsGeometry | 给子widget的间距 |
| child | Widget | 子widget |
Padding属性详细使用
1、padding 、child
padding 给子widget的间距
child 接收一个子 Widget
完整代码
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
import 'package:flutter/material.dart';
class PaddingExample extends StatefulWidget {
@override
_PaddingExampleState createState() => _PaddingExampleState();
}
class _PaddingExampleState extends State<PaddingExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Padding example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(0),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Padding(
padding: EdgeInsets.all(0),
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
Padding(
padding: EdgeInsets.all(0),
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
)
],
),
),
);
}
}
EdgeInsetsGeometry详解
EdgeInsetsGeometry 是一个描述边距的组件，一般都是使用它的子类 EdgeInsets 来进行设置。
1、fromLTRB
设置左、上、右、下的边距，可设定不同的值。
使用方法
1
2
3
4
5
6
7
8
Padding(
padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
2、all
同时设置所有的边距为同一个值
使用方法
1
2
3
4
5
6
7
8
Padding(
padding: EdgeInsets.all(10),
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
)
3、only
根据需要设置某一个边的间距
使用方法
1
2
3
4
5
6
7
8
9
10
11
Padding(
padding: EdgeInsets.only(
left: 10,
right: 10
),
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
)
4、symmetric
设置水平（上下）、或者垂直（左右）的间距
使用方法
1
2
3
4
5
6
7
8
9
10
11
Padding(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 10
),
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
)
完整代码
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
import 'package:flutter/material.dart';
class PaddingExample extends StatefulWidget {
@override
_PaddingExampleState createState() => _PaddingExampleState();
}
class _PaddingExampleState extends State<PaddingExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Padding example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Padding(
padding: EdgeInsets.all(10),
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
Padding(
padding: EdgeInsets.only(
left: 10,
right: 10
),
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
Padding(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 10
),
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
)
],
),
),
);
}
}
AnimatedPadding介绍
1
`Padding` 组件的动画版本，在设置的时间内缩放或放大到指定的padding
AnimatedPadding构造函数
1
2
3
4
5
6
7
8
9
10
AnimatedPadding({
Key? key,
required this.padding, // 边距
this.child, // 子Widget
Curve curve = Curves.linear, // 动画的运动速率
required Duration duration, // 动画的持续时间
VoidCallback? onEnd, // 动画结束时的回调
}) : assert(padding != null),
assert(padding.isNonNegative),
super(key: key, curve: curve, duration: duration, onEnd: onEnd);
AnimatedPadding完整示例代码
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
import 'package:flutter/material.dart';
class AnimatedPaddingExample extends StatefulWidget {
@override
_AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}
class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
double paddingAllValue = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AnimatedPaddingExample"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Padding: $paddingAllValue'),
AnimatedPadding(
padding: EdgeInsets.all(paddingAllValue),
duration: Duration(milliseconds: 1000),
curve: Curves.easeInOut,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 4,
color: Colors.blue,
),
onEnd: () {
print("动画结束时的回调");
},
),
ElevatedButton(
child: Text('改变padding的值'),
onPressed: () {
setState(() {
paddingAllValue = paddingAllValue == 0.0 ? 50.0 : 0.0;
});
}),
],
),
);
}
}
AnimatedPadding效果展示
总结
当只需要给组件之间增加一些间距时，使用Padding 是最好的选择。而如果的Padding在某种情况下需要改变其大小并且需要增加动画效果时，使用AnimatedPadding 最佳，而不需要花费大量时间去写动画。