Flutter AnimatedSwitcher 动画切换组件的基本使用

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。


【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


​AnimatedSwitcher组件用来执行动画组件的切换功能,如 A 的缩小 B 的放大,通过AnimatedSwitcher组件可以很巧妙的结合在一起。

本文最终执行效果如下图所示:

在这里插入图片描述

1 AnimatedSwitcher 构造函数属性说明

const AnimatedSwitcher({
  Key key,
  this.child,
  @required this.duration, // 新child显示动画时长
  this.reverseDuration,// 旧child隐藏的动画时长
  this.switchInCurve = Curves.linear, // 新child显示的动画曲线
  this.switchOutCurve = Curves.linear,// 旧child隐藏的动画曲线
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, // 动画构建器
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器
})
2 AnimatedSwitcher 核心使用方法
///AnimatedSwitcher 的基本使用
 AnimatedSwitcher buildAnimatedSwitcher(BuildContext context) {
   return AnimatedSwitcher(
     ///动画执行切换时间
     duration: const Duration(milliseconds: 600),
     ///动画构建器 构建指定动画类型
     transitionBuilder: (Widget child, Animation<double> animation) {
       //执行缩放动画
       return ScaleTransition(child: child, scale: animation);
     },
     ///执行动画的子 Widget
     ///只有子 Widget 被切换时才会触发动画
     child: Text(
       '$_count',
       //显示指定key,不同的key会被认为是不同的Text
       key: ValueKey<int>(_count),
       style: TextStyle(fontSize: 22),
     ),
   );
 }

当 这里使用到的 _count 变量值更新并刷新页面时,可触发动画效果,如点击一个按钮,修改 _count 的值 如下代码:

///构建一个有边框的按钮 
 OutlineButton buildOutlineButton() {
   return OutlineButton(
     child: const Text(
       '数据递增',
     ),
     onPressed: () {
       print(("count $_count"));
       setState(() {
         _count += 1;
       });
     },
   );
 }

完毕

当然微信公众号如果你有兴趣可以关注一下,每日分享不在话下。
在这里插入图片描述


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页