这是flutter最基础的动画组件,用起来也是很简单。
比Container组件就只是多了curve,duration和onEnd三个属性,我简单介绍一下这三个属性。
curve指的是动画曲线类型,默认是linear类型
duration指的是动画时间,这个是必须设置的属性
onEnd这个属性是动画完成的回调
自己写的代码如下:
import 'package:flutter/material.dart';
class AnimatedContainerScreen extends StatefulWidget {
AnimatedContainerScreen({Key key}) : super(key: key);
@override
_AnimatedContainerScreenState createState() => _AnimatedContainerScreenState();
}
class _AnimatedContainerScreenState extends State<AnimatedContainerScreen> {
bool normal = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Container'),
),
body: Container(
alignment: Alignment.center,
child: AnimatedContainer(
width: normal ? 200 : 100,
height: normal ? 200 : 100,
color: normal ? Colors.blue : Colors.red,
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
onEnd: () {
debugPrint('animate end ======');
},
),
),
floatingActionButton: FloatingActionButton(
child: Text('switch'),
onPressed: () {
setState(() {
normal = !normal;
});
}
)
);
}
}
对应的效果如下:
animated_container.gif
这个系列的文章是根据flutter 的 Widget of the week来做的,欢迎大家斧正。
网友评论