Flutter 中的高度变化补间动画问题

Question

我想为容器的高度设置动画

我想做的是：

class _AddVehicleState extends State<AddVehicle>
    with SingleTickerProviderStateMixin {

   AnimationController _otherFieldsAnimationController;
   Animation<double> _heightAnimation;

  override
  void initState() {
    _otherFieldsAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 3000),
    );


    _heightAnimation = new Tween<double>(begin: 400.0, end: 20.0)
        .animate(_otherFieldsAnimationController);

    _otherFieldsAnimationController.forward();

}

 @override
  Widget build(BuildContext context) {
    return new WillPopScope(
        onWillPop: _onWillPop,
        child: new Scaffold(body: Builder(builder: (scaffoldContext1) {
          scaffoldContext = scaffoldContext1;
          return Stack(
            children: <Widget>[
              new Container(
                decoration: getGradientBackground(),
                child: ListView(
                  children: <Widget>[
                    Container(
                       color: Colors.white70,
                       height: _heightAnimation.value,
                       child: Center(
                       child: Text('HEY'),
                    ));
        .
        .
        .
        .
        .

如您所见，容器包含 Animation 的高度。

此页面上的所有其他动画都可以正常运行，但此容器没有动画。

有什么特别的原因吗？还是我错过了什么？

Answer 1

你可以像这样使用动画容器

    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> _animation;
      var _duration = const Duration(milliseconds: 3000);

      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
          vsync: this,
          duration: _duration,
        )..addListener(() {
            setState(() {});
          });
        _animation =
            new Tween<double>(begin: 20.0, end: 400.0).animate(_controller);
_controller.forward();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('Stackoverflow'),
            ),
            body: Center(
              child: AnimatedContainer(
                duration: _duration,
                height: _animation.value,
                width: 200,
                color: Colors.amber,
              ),
            ));
      }
    }