
微信交流群
# AnimatedIcon
我们都知道Flutter系统中提供了大量的图标,但你是否知道Flutter还提供了很多动画图标,想要使用这些动画图标需要使用AnimatedIcon控件,首先需要设置图标,代码如下:
AnimatedIcon(
icon: AnimatedIcons.view_list,
...
)
1
2
3
4
2
3
4
还需要设置progress
,progress
用于图标的动画,设置如下:
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
State<StatefulWidget> createState() => _TestState();
}
class _TestState extends State<Test> with TickerProviderStateMixin {
AnimationController animationController;
void initState() {
super.initState();
animationController =
AnimationController(duration: Duration(seconds: 1), vsync: this)
..addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed) {
animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
animationController.forward();
}
});
animationController.forward();
}
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
alignment: Alignment.center,
child: AnimatedIcon(
icon: AnimatedIcons.view_list,
progress: animationController,
),
);
}
dispose() {
super.dispose();
animationController.dispose();
}
}
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
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
上面的代码同时对动画的状态进行了监听使动画往复运动,动画效果:
系统提供的图标样式如下:
版权所有,禁止私自转发、克隆网站。