AnimatedContainer可以動畫它的高度嗎？

Question

我想動畫列表中兩個項目之間的間隙。我想過使用一個初始高度爲零的AminatedContainer，但我不熟悉如何使這項工作。我現在的代碼是：

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

這確實會改變容器的高度，但不會像我所希望的那樣以動畫方式。任何幫助將感激地收到！

Answer 1

我不知道，如果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; 
          })), 
       ], 
      ) 
      ],) 
      ,) 
    ); 
    } 
} 

Answer 2

您可以爲此使用AnimatedSize。

https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html