【Flutter 组件集录】TickerMode｜ 8月更文挑战

前言：

这是我参与8月更文挑战的第 12 天，活动详情查看：8月更文挑战。为应掘金的八月更文挑战，我准备在本月挑选 31 个之前没有介绍过的组件，进行全面分析和属性介绍。这些文章未来会做为 Flutter 组件集录 的重要素材。但愿能够坚持下去，你的支持将是我最大的动力~

本系列	组件文章	列表
1.NotificationListener	2.Dismissible	3.Switch
4.Scrollbar	5.ClipPath	6.CupertinoActivityIndicator
7.Opacity	8.FadeTransition	9. AnimatedOpacity
10. FadeInImage	11. Offstage	12. TickerMode[本文]

---

1、认识 TickerMode 组件

可能绝大多数的人都没据说过这个组件，更没用过。咱们都知道 Ticker 是动画控制器的底层驱动力，TickerMode 组件能够禁用/启用子树下全部的 Ticker ，也就是说它可让子树的全部动画无效或生效。咱们能够经过动画控制器来主动控制动画的开启或中止，那 TickerMode 组件的价值何在，它又是如何实现控制子树全部的动画呢？带着这些问题，咱们今天就来详细分析一下 TickerMode 组件。

---

1.TickerMode 基本信息

下面是 TickerMode 组件类的定义和 构造方法，能够看出它继承自 StatelessWidget。实例化时必须传入布尔型的 enabled 和 child 组件。

---

2. TickerMode 的使用

下面经过一个案例测试一下 TickerMode 组件，以下 buildTestContent 方法构建的是下面的三个组件，被TickerMode 包裹。buildOutSwitch 是上面的Switch开关，它在 TickerMode 组件以外。

可见，当上面的Switch开关打开 _disable 为 true 时，TickerMode 的 enabled 为 false 。此时下面的两个 loading 组件就中止了运动。从这能够看出，咱们并无对两个 loading 组件的动画控制器执行任何操做，也没有改变组件属性进行重建。就能够直接禁用/启用它们的动画，是否是很是神奇。像这样能够随意插拔，几乎没有任何耦合性，却能完成某个功能的组件，能够增长使用的灵活性。

@override
Widget build(BuildContext context) {
  return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          buildOutSwitch(),
          TickerMode( //<--- 使用 TickerMode 
              enabled: !_disable,
              child: buildTestContent()),
        ],
      );
}

Widget buildOutSwitch() => Wrap(
          alignment: WrapAlignment.center,
          crossAxisAlignment: WrapCrossAlignment.center,
          children:[
            Text('TickerMode外的Switch:'),
            Switch(
            value: _disable,
            onChanged: _onChanged,
          )] ,
        );

Widget buildTestContent() => Wrap(
    alignment: WrapAlignment.center,
    crossAxisAlignment: WrapCrossAlignment.center,
    spacing: 20,
    children: [
      Switch(
        value: _disable,
        onChanged: _onChanged,
      ),
      CupertinoActivityIndicator(),
      CircularProgressIndicator(),
    ],
  );
复制代码

---

可能你会疑惑，我为何要在测试案例的下面一排放一个 Switch ？这样能够更好地说明 TickerMode 的做用范围。以下，点击下面的 Switch ，一样也会切换 _disable 的状态，能够看出因为下排的 Switch 上层的 TickerMode 被设为 disable：true，动画被禁用了。对比两个 Switch 的表现，你就能明白 TickerMode 的做用范围是在子树中。

---

2、 TickerMode 的源码实现

1. TickerMode 源码分析

TickerMode 组件的源码很是简单，主要就是三个处理，分别是 构造方法、build 构造、经过 of 静态方法查看 enabled 的值。其中 build 方法返回的是 _EffectiveTickerMode , of 静态方法查经过 dependOnInheritedWidgetOfExactType 来查询上级的 _EffectiveTickerMode 组件。那么用脚指头都能想出来 _EffectiveTickerMode 必定是一个 InheritedWidget ，且持有 enabled 数据。

---

2._EffectiveTickerMode 源码分析

果不其然，_EffectiveTickerMode 继承自 InheritedWidget，并持有 enabled 数据。这样该数据就能够在子树中共享。这样看来，动画的体系中，应该会经过上下文获取这个值，对 Trick 进行处理。若是你也就看完 《Flutter 动画探索 - 流光幻影》,那么这里应该就能衔接上了。

---

3. TickerMode 控制动画的原理

咱们在使用动画时，都会使用 SingleTickerProviderStateMixin 或 TickerProviderStateMixin 来建立 动画控制器。《Flutter 动画探索 - 流光幻影》的第 16 篇介绍了 Ticker 和 TickerProvider 的源码。

好比在 SingleTickerProviderStateMixin 中的一个不起眼的地方，有着一句不起眼的代码，这就是 TickerMode 控制动画的原理 。不知道有多少人能说清 didChangeDependencies 的用途和回调的时机，又有的多少人成天吵着这个状态管理框架，那个路由管理工具。连最基本的乘法口诀都背很差，就去学奥数？

TickerProviderStateMixin 中也是相似，经过 TickerMode.of 获取上层的值，来更新 Ticker 的 muted 属性。

不少看似绝不起眼的东西，都是相当重要的存在，也许某一处小细节，就可让你豁然开朗。从这里也能看出 TickerMode 只会对 SingleTickerProviderStateMixin 或 TickerProviderStateMixin 生效。也就是说，若是你是本身建立的 Ticker ，而且没有在 didChangeDependencies 回调中进行处理，那么 TickerMode 就管不住这个 Ticker 。那TickerMode 的使用方式到这里就介绍完毕，那本文到这里就结束了，谢谢观看，明天见~