目录
前言AnimatedSwitcher 介绍应用总结前言
在应用中,我们经常会遇到切换组件的场景,比如点击一个按钮后,将当前的图片为另一张图片;或者是翻转卡片,显示卡片详情。在 Flutter 中提供了AnimatedSwitcher
这个动画组件来实现页面内的场景切换。
AnimatedSwitcher.gif
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, Animationanimation);
layoutBuilder
:可以设置新组件在组件树中的布局,也是一个函数:
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, ListpreviousChildren);
默认布局为defaultLayoutBuilder
,也就是将当前组件放置在最顶层:
static Widget defaultLayoutBuilder(Widget? currentChild, ListpreviousChildren) { return Stack( children: [ ...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{ 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), ); }); }, ), ); } }
总结
本篇介绍了AnimatedSwitcher
动画组件的使用。AnimatedSwitcher
可以用于界面中组件的切换过渡动效,并且可以控制切入切出的时长、动画取消、过渡效果和布局,从而可以实现一些有趣的切换效果。另外,需要注意的是,如果要切换的子组件类型相同,则需要使用Key
进行区分,否则动效不会呈现出来。
到此这篇关于Flutter使用AnimatedSwitcher实现场景切换动画的文章就介绍到这了,更多相关Flutter场景切换动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
上一篇:Python中的嵌套循环详情
下一篇:Flutter开发实现底部留言板
X 关闭
X 关闭
- 15G资费不大降!三大运营商谁提供的5G网速最快?中国信通院给出答案
- 2联想拯救者Y70发布最新预告:售价2970元起 迄今最便宜的骁龙8+旗舰
- 3亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 4现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 5如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 6AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 7转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 8充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 9好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 10名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?