18、Flutter Widget - AnimatedSwitcher;

介绍

  如果想在两个或多个小部件之间切换时使用时髦的动画，可以使用AnimatedSwitcher;

简单使用

  将需要动画的小部件设为AnimatedSwitcher的child,接下来，设置转换应持续的时间:

  AnimatedSwitcher(
   duration:const Duration(seconds:1),
   child:_myAnimatedWidget,
 )
//切换
setState(()=>_myAnimatedWidget= DifferentWidget());

使用其他动画

  默认情况下，两个Widget之间会执行FadeTransition,可以通过使用设置transitionBuilder参数来设置ScaleTransition、RotationTransition 等动画:

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

其他

  还可以设置layoutBuilder来更改小部件的位置。

  如果你切换的新的小部件与上一个小部件的类型相同，不要忘记设置key:

_myAnimatedWidget = SomeWidget(
 key:ValueKey(1));
//切换
setState(()=>_myAnimatedWidget = SomeWidget(key:ValueKey(2)));