【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 的使用方式到這裏就介紹完畢，那本文到這裏就結束了，謝謝觀看，明天見~