专栏首页Flutter笔记Flutter | 求求你们了,切换 Widget 的时候加上动画吧

Flutter | 求求你们了,切换 Widget 的时候加上动画吧

平时我们在切换 Widget 的时候是怎样的?

有没有动画效果?是不是直接改变了一个 Widget?

类似于这样的:

如果是的话,那么今天所说的 Widget,绝对符合你的口味。

那如何在 Flutter 当中切换 Widget 的时候加上特效?完成这样的效果?

AnimatedSwitcher 了解一下。

AnimatedSwitcher

官方介绍

话不多说,功能我们已经了解,再来看一下官方的介绍:

A widget that by default does a FadeTransition[1] between a new widget and the widget previously set on the AnimatedSwitcher[2] as a child. If they are swapped fast enough (i.e. before duration[3] elapses), more than one previous child can exist and be transitioning out while the newest one is transitioning in. If the "new" child is the same widget type and key as the "old" child, but with different parameters, then AnimatedSwitcher[4] will not do a transition between them, since as far as the framework is concerned, they are the same widget and the existing widget can be updated with the new parameters. To force the transition to occur, set a Key[5] on each child widget that you wish to be considered unique (typically a ValueKey[6] on the widget data that distinguishes this child from the others). 大致意思就是: 默认情况下是执行透明度的动画。 如果交换速度足够快,则存在多个子级,但是在新子级传入的时候将它移除。 如果新 Widget 和 旧 Widget 的类型和键相同,但是参数不同,那么也不会进行转换。如果想要进行转换,那么要添加一个 Key。

构造函数

再来看构造函数,来确定如何使用:

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,
}) : assert(duration != null),
assert(switchInCurve != null),
assert(switchOutCurve != null),
assert(transitionBuilder != null),
assert(layoutBuilder != null),
super(key: key);

来解释一下每个参数:

1.child:不用多说2.duration:动画持续时间3.reverseDuration:从新的 Widget 到旧的 Widget 动画持续时间,如果不设置则为 duration 的值4.switchInCurve:动画效果5.switchOutCurve:同上6.transitionBuilder:设置一个新的转换动画7.layoutBuilder:包装新旧 Widget 的组件,默认是一个 Stack

其中必要参数就是一个 duration,那既然知道如何使用了,那就开撸。

简单例子

前面我们看的图,就是在对 AppBar上的 actions 进行操作,

其实这个例子在实际开发当中经常存在,肯定要删除一些东西的嘛,然后选中了以后批量删除。

那这里也不多说,直接上代码,然后解释:

class _AnimatedSwitcherPageState extends State<AnimatedSwitcherPage> {
  IconData _actionIcon = Icons.delete;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimatedSwitcherPage'),
          actions: <Widget>[
            AnimatedSwitcher(
              transitionBuilder: (child, anim){
                return ScaleTransition(child: child,scale: anim);
              },
              duration: Duration(milliseconds: 300),
              child: IconButton(
                  key: ValueKey(_actionIcon),
                  icon: Icon(_actionIcon),
                  onPressed: () {
                    setState(() {
                      if (_actionIcon == Icons.delete)
                        _actionIcon = Icons.done;
                      else
                        _actionIcon = Icons.delete;
                    });
                  }),
            )
          ],
        ),
        body: Container());
  }
}

我们定义的是一个 StatefulWidget,因为在切换 Widget 的时候要调用 setState()

下面来说一下整个流程:

1.首先定义好我们初始化的 Icon的数据为 Icons.delete2.在 AppBaractions 里面加入 AnimatedSwitcher3.设置 transitionBuilder 为 缩放动画 ScaleTransition4.给 AnimatedSwitcher 的 child 为 IconButton5.因为前面官方文档说过,如果 Widget 类型一样,只是数据不一样,那么想要动画,就必须添加 Key。6.所以我们给 IconButton 添加了一个 ValueKey,值就为定义好的 IconData7.最后在点击事件中切换两个 Icon 就完成了

最后再看一下效果:

总结

使用该控件最应该注意的点就是 Key 的问题,一定要记住:

如果新 Widget 和 旧 Widget 的类型和键相同,但是参数不同,那么也不会进行转换。如果想要进行转换,那么要添加一个 Key。

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

References

[1] FadeTransition: https://api.flutter.dev/flutter/widgets/FadeTransition-class.html [2] AnimatedSwitcher: https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html [3] duration: https://api.flutter.dev/flutter/widgets/AnimatedSwitcher/duration.html [4] AnimatedSwitcher: https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html [5] Key: https://api.flutter.dev/flutter/foundation/Key-class.html [6] ValueKey: https://api.flutter.dev/flutter/foundation/ValueKey-class.html

本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter测试(二):在项目中进行 Widget 测试

    上回书对 Flutter 中 Widget 测试的官方 Demo 进行了简单的讲解,这篇文章我们对自己的项目进行 Widget 测试。

    Flutter笔记
  • Flutter 数据监听Widget

    给定ValueListenable 一个泛型和一个构建器,它从泛型的具体值构建小部件,这个类将自动注册为ValueListenable 的侦听器,并在值更改时用...

    Flutter笔记
  • Flutter | ConstrainedBox & UnconstrainedBox 组件

    在 Flutter 当中,我们如何控制组件的大小?套上一层 Container?SizeBox?还是一些别的技巧?

    Flutter笔记
  • Flutter 组件 | ValueListenableBuilder 局部刷新小能手

    我们对初始项目非常熟悉,在 _MyHomePageState 中,通过点击按钮将状态量 _counter 自加,在使用 setState 让当前 State 类...

    张风捷特烈
  • 关于敏捷开发的26个心得

      我收集各式各样的至理名言。最近我一直在研究敏捷软件开发;有收获吗?下面就是能够指导敏捷软件开发团队的26条核心原则。 用例一完全能够运行后再开发用例二。厨...

    用户1289394
  • Android截屏的几种实现

    此种方式比较简单只需传入当前要截取屏幕的Activity对象即可,不需要添加任何权限,后续可将截图的bitmap保存到本地即可;

    Vance大飞
  • HTML- white-space 和 overflow 两个重要的 CSS 属性

    CSS的作用是给 HTML 元素添加样式和布局,接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动,效果如下:

    傅_hc
  • CSS 3.0实现迷你钟特效

    越陌度阡
  • 数据可视化-Matplotlib绘制实时数据图表

    今天我们将学习如何使用Matplotlib绘制实时数据图表。我们将学习如何监控不断更新的CSV文件,并在该文件进入时绘制该CSV文件中的值。这对于绘制来自API...

    亚乐记
  • Idea使用又Get新技能

    有些功能不是不会用,或许只是你不知道有这么一个东西的存在。昨天刷朋友圈看到超哥晒“红酒与代码”的照片,看了配图Get到新技能,也解决了日常遇到的问题,分享给大家...

    程序新视界

扫码关注云+社区

领取腾讯云代金券