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

前言：

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

一、认识 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 的作用范围是在子树中。

二、 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 的使用方式到这里就介绍完毕，那本文到这里就结束了，谢谢观看，明天见~