
微信交流群
# AnimatedAlign
AnimatedAlign组件方便我们构建位置动画,基本用法如下:
var _alignment = Alignment.topLeft;
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
color: Colors.lightBlue,
child: AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 2),
child: IconButton(
icon: Icon(Icons.print,color:Colors.red,size: 30,),
onPressed: (){
setState(() {
_alignment = Alignment.bottomRight;
});
},
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果如下:
我们还可以通过curve
设置动画曲线,用法如下:
AnimatedAlign(
curve: Curves.bounceInOut,
...
)
1
2
3
4
2
3
4
onEnd
是动画执行结束回调,用法如下:
AnimatedAlign(
onEnd: (){
print('onEnd');
},
...
)
1
2
3
4
5
6
2
3
4
5
6
版权所有,禁止私自转发、克隆网站。