AnimatedContainer可以动画它的高度吗?

问题描述:

我想动画列表中两个项目之间的间隙。我想过使用一个初始高度为零的AminatedContainer,但我不熟悉如何使这项工作。我现在的代码是:AnimatedContainer可以动画它的高度吗?

new AnimatedContainer(
     duration: const Duration(milliseconds: 200), 
     height: App.itemSelected==id ? 50.0 : 0.0, 
     curve: Curves.fastOutSlowIn, 
    ), 

这确实会改变容器的高度,但不会像我所希望的那样以动画方式。任何帮助将感激地收到!

我不知道,如果AnimatedSize是适合你的使用情况,但我已经添加了关于如何使一个简单的动画有它的一个例子:

着色是有点过因录音,但你应该能够自己测试。

enter image description here

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; 
          })), 
       ], 
      ) 
      ],) 
      ,) 
    ); 
    } 
}