flutter组件之AnimatedContainer
自我理解:
体验了一下 就是一个带动画的容器,这个容器的很多属性 例如width、height、color等等都是支持动态变化的,并且变化的过程和效果可以通过duration,curve等属性来设置
[官网api地址]https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
api里例子和视频生动形象,需要梯子
上代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class AnimatedContainerDemo extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _AnimatedContainerDemoState();
}
}
class _AnimatedContainerDemoState extends State<AnimatedContainerDemo>{
bool selected = false;
@override
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: Container(//子元素
height: 50,
width: 50,
color: Colors.yellow,
),
),
),
);
}
}