Flutter Widget 之AnimatedSwitcher

在过度时，你想用时髦的动画，在两个或多个widget之间切换吗？

AnimatedSwitcher将满足你的要求。

首先，将需要动画的widget设为AnimatedSwitcher的子级

接下来，设置转换应持续的时间

AnimatedSwitcher(
    duration: const Duration(seconds: 1),
    child: _myAnimatedWidget,
)

然后，当你想为某个widget设置动画时，使用像setState这样的句子更改myAnimatedWidget的值

// elsewhere in the code
setState(() =>
        _myAnimatedWidget = DifferentWidget);

AnimatedSwitcher将完成剩下的工作

默认情况下两个widget之间会执行FadeTransition

但是通过设置transitionBuilder参数， 你可以做别的比如说ScaleTransition或RotationTransition

AnimatedSwitcher(
    duration: const Duration(second: 1),
    transitionBuilder: (Widget child,
            Animation<double> animation) =>
        ScaleTransition(
        child: child,
        scale: animation),
    child: _myAnimatedWidget,
)

你也可以设置layoutBuilder参数在你的应用程序中更改widget的位置

如果你切换新的widget与上一个widget的类型相同，不要忘记设置key属性获得那个动画功能

_myAnimatedWidget = SomeWidget(key : ValueKey(1));

// later, to animate
setState(
    () => _myANimatedWidget = SomeWidget(
                key: ValyeKey(2))
);

如果想了解有关AnimatedSwitcher的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址