Flutter日曆項目的優化記錄

FlutterCalendarWidget

Flutter上的一個日曆控件，能夠定製成本身想要的樣子。

實現日曆並不難，主要是以前實現的性能有點差，進行了下優化。這篇文章主要記錄一下本身對這個日曆項目的優化過程。

截圖

項目地址

日曆支持web預覽：點擊此處進入預覽

項目結構

下圖就是項目的總體結構，沒啥特殊的，就是寫一個日曆須要的一些數據。

• constants：存放一些常量
• model：自定義日曆用的實體類DateModel
• style：自定義的一些style
• utils：工具類
• widget：顯示月視圖、周視圖的widget。
• calendar_provider：使用provider建立的共享狀態類
• configuration:定義配置信息
• controller：日曆控制器，能夠對日曆進行一些操做或者配置
• flutter_custom_calendar: 日曆Widget

Widget層級

• 總體是一個Column，頂部固定一個自定義的weekbar。
• 下面是一個AnimatedContainer，用來實現周視圖和月視圖切換的高度變化的動畫效果。
• IndexedStack用來存放周視圖和月視圖的widget。與Stack相同的地方是都是實現層疊的佈局，與Stack不一樣的地方是Stack顯示的時候會把children都繪製出來。而IndexedStack只會繪製指定index的那個child。因此這裏利用切換index來切換顯示周視圖和月視圖。具體文章：Exploring Stack and IndexedStack in Flutter

  

優化記錄

優化後的性能

優化前，真tm是一片紅。

進行各類優化後，最終的性能以下面幾個圖所示。總體性能還好，頁面間切換也沒那麼卡來。每幀的耗時大部分小於16ms，達到指望，還能夠繼續優化下。

• 圖一：AndroidStudio自帶的工具欄Flutter Performance，能夠查看相關的性能數據
• 圖二：打開Show Performance Overlay的開關，就能夠在app上顯示性能統計數據的浮窗。
• 圖三：Flutter提供的Devtools工具，在瀏覽器中能夠查看各類性能的數據。（具體使用百度一下）

  

  

  

代碼優化

以前日曆的配置信息全都是放在controller裏面的，並且日曆可配置的信息會有不少，感受有點亂。此次將配置的信息都抽放到一個CalendarConfiguration對象中。而且這個CalendarConfiguration對象存放在頂層的provider狀態類中，可讓子Widget直接獲取到配置信息。

引進provider狀態管理框架

引進provider狀態管理框架，一方面是能夠避免數據各類嵌套傳遞，一方面是實現局部刷新提升性能。

關於provider的使用：Flutter | 狀態管理指南篇——Provider

• 引進provider前的代碼

各類數據和狀態都須要一層一層往下傳遞給子Widget，有點噁心。

• 引進provider後的代碼

建立狀態類CalendarProvider，用於共享日曆的數據和狀態，子widget能夠直接獲取到CalendarProvider中的數據。代碼比以前好看一點，不事後面仍是得繼續優化。

沒有了代碼嵌套，構造方法簡單了不少。在子組件的build方法裏，也能夠獲取到各類狀態數據。

使用compute加載數據

相關文章：Flutter 異步編程：Future、Isolate 和事件循環

• Dart是一種單線程語言，Isolate就是Dart中的線程。

• 默認的Flutter代碼是運行在同一個isolate裏面的。每一個Isolate都有着本身的事件循環EventLoop和兩個隊列（MicroTask和Event）。以下圖所示，MicroTask隊列的優先級優先於Event隊列，當沒有MicroTask事件的時候，纔會去執行Event隊列中的第一項。

• 注意：Future操做也是經過Event隊列處理。Future和async並不是並行執行，而是遵循事件循環處理事件的順序規則執行。 若是繁重的處理可能須要一些時間才能完成，而且可能影響應用的性能，考慮使用 Isolate。 因此，能夠利用多個Isolate來實現真正的並行處理。

• Flutter提供了一個compute的方法，讓咱們可用來直接建立一個isolate。Compute函數對isolate的建立和底層的消息傳遞進行了封裝，使得咱們沒必要關係底層的實現，只須要關注功能實現。 使用Compute寫isolates

• Isolate的使用場景

  因此一些比較耗時的操做，咱們能夠放在另外一個isolate中進行並行執行。

  • JSON 解碼：解碼 JSON（HttpRequest 的響應）可能須要一些時間 => 使用 compute
  • 加密：加密可能很是耗時 => Isolate
  • 圖像處理：處理圖像（好比：剪裁）確實須要一些時間來完成 => Isolate

• 在日曆項目中的應用

好比我準備顯示月視圖，須要進行數據的加載拿到42個item。就須要去計算這個月對應的是42個item，以及去計算出每一個item所對應的DateModel，以及各類所須要的信息。這個過程是比較耗時的，因此我就使用compute將這個操做放在另外一個isolate裏面進行操做。

使用getter實現數據的懶加載

Dart中的某個變量，默認都有setter和getter方法，getter方法就是用來獲取變量的值。

若是這個變量的值是須要一系列計算（可能比較耗時）後才能獲得結果。 若是在建立這個對象的時候就去計算結果並賦值給這個變量，就會花費額外的一些時間。也有可能計算了，可是這個對象後面也不會用到，那就很不必了。

因此可使用相似下面的寫法，實現相似懶加載的功能。調用getter方法的時候，纔去判斷值是否爲空，爲空的話纔開始進行數據計算。

每一個DateModel都包含了一大堆屬性，須要我去計算，好比農曆、傳統節日、24節氣。這些的計算是比較複雜和耗時的，因此我就將部分屬性的計算操做放到對應getter方法中，這樣的話，就不用在一開始加載數據的時候，將全部的屬性都進行計算。

點擊item後進行刷新日曆

呵呵，以前點擊item後，而後無論三七二之一，調用setState方法去刷新整個日曆的狀態，搞定。可想而知，性能確定會差點。

提升Build效率的一種方法就是下降遍歷的出發點。直接在日曆Widget內調用它的setState的話，那rebuild的時候，就須要將整個日曆Widget樹進行遍歷刷新。

因此這裏的作法是將日曆的item抽成一個StatefulWidget，這樣的話，若是調用日曆item的setState方法的話，就只會刷新這個item，實現將刷新範圍縮小到item級別。

• 這裏寫了一個refreshItem的方法，能夠給item自身調用或者外部調用。

注意：這裏要判斷mounted後纔去調用setState方法。由於有可能這個節點已經從element樹移除了，這個時候若是調用setState的話，就會報錯。在日常的開發中，也要注意這種問題。好比在獲取網絡數據的時候，若是當前頁面被dispose了，等接口的數據返回後，直接調用setState的話就會報錯。

Exception caught by gesture
        The following assertion was thrown while handling a gesture:
        setState() called after dispose()
複製代碼

• 多選模式：只刷新當前的item就好了。

多選模式就很簡單，每一個item，都利用GestureDetector監聽日曆item的點擊事件，而後調用setState方法刷新自身就行。

• 單選模式：只刷新兩個item，當前item和上一個item。

單選模式，好比咱們選中某一個item，須要刷新這個item，而且將上一個選中的item的Widget進行刷新。因此這裏定義了一個lastClickItemState變量來保存上一個點擊的item的State對象，每次點擊item的時候，調用這個lastClickItemState的refreshItem方法。

ItemContainerState lastClickItemState;//上一個點擊的item
複製代碼

使用AutomaticKeepAliveClientMixin，使PageView保存內部item狀態

這個相信搞過PageView的朋友，都想切換到其餘頁面的時候，須要實現頁面保持狀態。 AutomaticKeepAliveClientMixin 這個 Mixin 是 Flutter 爲了保持頁面設置的。哪一個頁面須要保持頁面狀態，就在這個頁面進行混入。

只有兩個組件才能保持頁面狀態：PageView 和 IndexedStack。

因此這裏利用AutomaticKeepAliveClientMixin實現切換月份的時候，會維持上一個月或者下一個月的頁面。

加入 AutomaticKeepAliveClientMixin 混入，並重寫 wantKeepAlive 方法。

使用IndexStack實現切換功能：

周視圖和月視圖的切換功能的實現，這個暫時是用AnimatedContainer+IndexStack來實現的。不清楚還有沒有其餘更好的實現方案，還請大佬們給給意見。

• 一個是動畫效果。兩個視圖之間的切換，高度變化會有個動畫效果，可使用現成的AnimatedContainer來實現。比本身用AnimationController會方便不少。
• 用什麼widget來放周視圖和月視圖這兩個Widget,如今是用IndexStack。

一開始是用Stack來放周視圖和月視圖兩個widget，也是能夠實現效果的。後面看到有IndexStack這個東西，就拿來使用了。

與Stack相同的地方是都是實現層疊的佈局，與Stack不一樣的地方是Stack顯示的時候會把children都繪製出來。而IndexedStack只會繪製指定index的那個child。因此這裏利用切換index來切換顯示周視圖和月視圖。

Stack對應的renderObject是RenderStack，能夠看到，paint方法，最後是會將全部的child的給繪製出來。

IndexedStack實際上是繼承Stack，相應的renderObject是RenderIndexedStack，也是繼承於RenderStack。重寫了paintStack方法，只會繪製指定index的child。

總結

本身寫一個開源庫，雖然寫得很辣雞，不過仍是有挺多收穫的。經過這個項目，把Flutter性能優化的方法進行了實踐，更深刻地去了解Flutter的一些原理。