dart - Flutter:AnimatedContainer- child 小部件的属性未设置动画

Question

我有一个带有子控件的简单AnimatedWidget。

AnimatedContainer(
   duration: Duration(milliseconds: 2000),
   curve: Curves.bounceOut,
   decoration: BoxDecoration(
      color: Colors.purple,
   ),
   child: FlutterLogo(
     size: _boxSize,
   ),
),

_boxSize的动画如下:

void _startAnimation() => setState(() {
    _boxSize *= 1.7;
  });

但是，对于 子小部件， AnimatedContainer 不起作用。您需要更改 AnimatedContainer的直接属性才能使动画正常工作。

这符合文档要求:

The [AnimatedContainer] will automatically animate between the old 
and new values of properties when they change using the provided curve 
and duration. Properties that are null are not animated. 
Its child and descendants are not animated.

什么是 等效于AnimatedContainer的，又可以 为其子动画，这是什么？

Answer 1

没有任何魔术部件可以简单地递归给所有 child 动画。但是我认为您想要的是一个隐式动画小部件。即。您可以更改窗口小部件的构造函数参数，并随着其更改将动画从一个值移动到下一个值。

最简单的方法可能是带有ImplicitlyAnimatedWidget的AnimatedWidgetBaseState。因此，对于您的示例，为boxSize属性设置动画可能看起来像:

class AnimatedFlutterLogo extends ImplicitlyAnimatedWidget {
  const AnimatedFlutterLogo({Key key, @required this.boxSize, @required Duration duration})
      : super(key: key, duration: duration);

  final double boxSize;

  @override
  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() => _AnimatedFlutterLogoState();
}

class _AnimatedFlutterLogoState extends AnimatedWidgetBaseState<AnimatedFlutterLogo> {
  Tween<double> _boxSize;

  @override
  void forEachTween(visitor) {
    _boxSize = visitor(_boxSize, widget.boxSize, (dynamic value) => Tween<double>(begin: value));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlutterLogo(
        size: _boxSize?.evaluate(animation),
      ),
    );
  }
}

imho已经非常简洁了，唯一真正的样板基本上是 forEachTween(visitor)方法，该方法必须为要设置动画的所有属性创建 Tween对象。