AnimatedContainer可以动画它的高度吗?
问题描述:
我想动画列表中两个项目之间的间隙。我想过使用一个初始高度为零的AminatedContainer,但我不熟悉如何使这项工作。我现在的代码是:AnimatedContainer可以动画它的高度吗?
new AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: App.itemSelected==id ? 50.0 : 0.0,
curve: Curves.fastOutSlowIn,
),
这确实会改变容器的高度,但不会像我所希望的那样以动画方式。任何帮助将感激地收到!
答
我不知道,如果AnimatedSize
是适合你的使用情况,但我已经添加了关于如何使一个简单的动画有它的一个例子:
着色是有点过因录音,但你应该能够自己测试。
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
double _height = 50.0;
double _width = 20.0;
var _color = Colors.blue;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new AnimatedSize(
curve: Curves.fastOutSlowIn, child: new Container(
width: _width,
height: _height,
color: _color,
), vsync: this, duration: new Duration(seconds: 2),),
new Divider(height: 35.0,),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.arrow_upward, color: Colors.green,),
onPressed:() =>
setState(() {
_color = Colors.green;
_height = 95.0;
})),
new IconButton(
icon: new Icon(Icons.arrow_forward, color: Colors.red,),
onPressed:() =>
setState(() {
_color = Colors.red;
_width = 45.0;
})),
],
)
],)
,)
);
}
}