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

很少有可以使孩子动起来的小部件。您可以使用AnimatedSwitcher小部件将新的flutter徽标小部件交换为首选大小。

AnimatedSwitcher-此小部件会将子小部件替换为新的小部件。
AnimatedPositioned-每当给定位置更改时，它将通过堆栈小部件更改子项的位置。
AnimatedAlign-align的动画版本，只要给定的对齐方式发生更改，它就会更改子级的对齐方式。
AnimatedCrossFade-它在两个孩子之间逐渐消失，并在其大小之间进行动画处理。

Answer 2

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

最简单的方法可能是将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),
      ),
    );
  }
}

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

Flutter：AnimatedContainer-儿童小部件的属性未设置动画

2 个答案: