1.概要
AnimatedContainer是一个Flutter中隐式动画Widget,当修改该Widget的特定属性后,比如颜色、边界、半径、背景图片、阴影、高度、宽度等等,调用setState就会使动画产生作用。动画会在旧的值和新的值之间持续的产生。
2.源码
AnimatedContainer({
Key key,
// 对齐方式
this.alignment,
// 填充
this.padding,
// 颜色
Color color,
// 背景装饰
Decoration decoration,
// 前景装饰
this.foregroundDecoration,
// 宽度
double width,
// 高度
double height,
// 约束
BoxConstraints constraints,
// 内部边距
this.margin,
// 旋转等变换
this.transform,
// 子Widget
this.child,
// 变化的方式,比如淡入淡出、平滑等
Curve curve = Curves.linear,
// 动画时长
@required Duration duration,
// 结束回调
VoidCallback onEnd,
})
3.示例
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: AnimatedContainer(
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: 75),
),
),
);
}
网友评论