当前位置：网站首页>Flutter 使用 AnimatedSwitcher 做场景切换

Flutter 使用 AnimatedSwitcher 做场景切换

2022-07-17 18:19:00 【InfoQ】

前言

在应用中，我们经常会遇到切换组件的场景，比如点击一个按钮后，将当前的图片为另一张图片；或者是翻转卡片，显示卡片详情。在 Flutter 中提供了

AnimatedSwitcher

这个动画组件来实现页面内的场景切换。

AnimatedSwitcher 介绍

AnimatedSwitcher

通过动效完成其子组件的切换，默认的效果是

FadeTransition

。当其子组件发生改变的时候，就会按设定的转变效果进行转换。

AnimatedSwitcher

的构造方法如下：

const AnimatedSwitcher({
 Key? key,
 this.child,
 required this.duration,
 this.reverseDuration,
 this.switchInCurve = Curves.linear,
 this.switchOutCurve = Curves.linear,
 this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
 this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
})

与之前其他的动画组件不同，

AnimatedSwitcher

的参数除了

duration

之外，其他的有所不同，具体如下：

reverseDuration
：反向时长，也就是切换为旧组件的时长，不设置的话就和
duration
一致。

switchInCurve
：切入动画曲线，也就是新组件切换进入的曲线；

switchOutCurve
：切出动画曲线，也就是旧组件切换出去时的曲线；

transitionBuilder
：切换转变动画构建，是一个函数，定义如下，可以用这个方法来构建自己的切换动效。

typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);

layoutBuilder
：可以设置新组件在组件树中的布局，也是一个函数：

typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);

默认布局为

defaultLayoutBuilder

，也就是将当前组件放置在最顶层：

static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
 return Stack(
 children: <Widget>[
 ...previousChildren,
 if (currentChild != null) currentChild,
 ],
 alignment: Alignment.center,
 );
}

关于

AnimatedSwitcher

有一个地方需要特别注意，那就是如果切换的两个组件相同的话，

AnimatedSwitcher

会以为组件没有改变，而不会进行动效切换。文档说明如下：

The child is considered to be "new" if it has a different type or [Key]

实际上是根据

Widget

的

canUpdate

判断的：

static int _debugConcreteSubtype(Widget widget) {
 return widget is StatefulWidget ? 1 :
 widget is StatelessWidget ? 2 :
 0;
}

因此，如果两个组件类型相同，需要使用不同的

Key

来区分，通常是使用

ValueKey

。

应用

下面我们来实现开篇的动效，这个使用的是

SizeTransition

尺寸变化转变动效完成两张图片的切换，这样会让组件的尺寸从小变到大，有一种掀开面纱的感觉。代码如下：

class AnimatedSwitcherDemo extends StatefulWidget {
 AnimatedSwitcherDemo({Key? key}) : super(key: key);

 @override
 _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
}

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
 Widget? _animatedWidget;
 bool test = false;

 @override
 void initState() {
 super.initState();
 _animatedWidget = ClipOval(
 child: Image.asset('images/beauty.jpeg'),
 key: ValueKey(1),
 );
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('AnimatedSwticher'),
 brightness: Brightness.dark,
 backgroundColor: Colors.black,
 ),
 backgroundColor: Colors.black,
 body: Center(
 child: Container(
 padding: EdgeInsets.all(10.0),
 child: AnimatedSwitcher(
 child: _animatedWidget,
 duration: const Duration(milliseconds: 1000),
 transitionBuilder: (child, animation) {
 return SizeTransition(
 sizeFactor: animation,
 child: child,
 );
 },
 ),
 ),
 ),
 floatingActionButton: FloatingActionButton(
 child: Icon(Icons.play_arrow),
 onPressed: () {
 setState(() {
 test = !test;
 _animatedWidget = test
 ? ClipOval(
 child: Image.asset('images/beauty2.jpeg'),
 key: ValueKey(2),
 )
 : ClipOval(
 child: Image.asset('images/beauty.jpeg'),
 key: ValueKey(1),
 );
 });
 },
 ),
 );
 }
}