Flutter之可滾動組件子項緩存 KeepAlive詳解

Posted on by

本文為大傢分析瞭Flutter之可滾動組件子項緩存 KeepAlive，供大傢參考，具體內容如下

首先回想一下，在介紹 ListView 時，有一個addAutomaticKeepAlives 屬性我們並沒有介紹，如果addAutomaticKeepAlives 為 true，則 ListView 會為每一個列表項添加一個 AutomaticKeepAlive 父組件。雖然 PageView 的默認構造函數和 PageView.builder 構造函數中沒有該參數，但它們最終都會生成一個 SliverChildDelegate 來負責列表項的按需加載，而在 SliverChildDelegate 中每當列表項構建完成後，SliverChildDelegate 都會為其添加一個 AutomaticKeepAlive 父組件。下面我們就先介紹一下 AutomaticKeepAlive 組件。

AutomaticKeepAlive

AutomaticKeepAlive 的組件的主要作用是將列表項的根 RenderObject 的 keepAlive 按需自動標記 為 true 或 false。為瞭方便敘述，我們可以認為根 RenderObject 對應的組件就是列表項的根 Widget，代表整個列表項組件，同時我們將列表組件的 Viewport區域 + cacheExtent（預渲染區域）稱為加載區域 ：

1.當 keepAlive 標記為 false 時，如果列表項滑出加載區域時，列表組件將會被銷毀。
2.當 keepAlive 標記為 true 時，當列表項滑出加載區域後，Viewport 會將列表組件緩存起來；當列表項進入加載區域時，Viewport 從先從緩存中查找是否已經緩存，如果有則直接復用，如果沒有則重新創建列表項。

那麼 AutomaticKeepAlive 什麼時候會將列表項的 keepAlive 標記為 true 或 false 呢？答案是開發者說瞭算！Flutter 中實現瞭一套類似 C/S 的機制，AutomaticKeepAlive 就類似一個 Server，它的子組件可以是 Client，這樣子組件想改變是否需要緩存的狀態時就向 AutomaticKeepAlive 發一個通知消息（KeepAliveNotification），AutomaticKeepAlive 收到消息後會去更改 keepAlive 的狀態，如果有必要同時做一些資源清理的工作（比如 keepAlive 從 true 變為 false 時，要釋放緩存）。

我們基於上一節 PageView 示例，實現頁面緩存，根據上面的描述實現思路就很簡單瞭：讓Page 頁變成一個 AutomaticKeepAlive Client 即可。為瞭便於開發者實現，Flutter 提供瞭一個 AutomaticKeepAliveClientMixin ，我們隻需要讓 PageState 混入這個 mixin，且同時添加一些必要操作即可：

class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {
 
  @override
  Widget build(BuildContext context) {
    super.build(context); // 必須調用
    return Center(child: Text("${widget.text}", textScaleFactor: 5));
  }
 
  @override
  bool get wantKeepAlive => true; // 是否需要緩存
}

代碼很簡單，我們隻需要提供一個 wantKeepAlive，它會表示 AutomaticKeepAlive 是否需要緩存當前列表項；另外我們必須在 build 方法中調用一下 super.build(context)，該方法實現在 AutomaticKeepAliveClientMixin 中，功能就是根據當前 wantKeepAlive 的值給 AutomaticKeepAlive 發送消息，AutomaticKeepAlive 收到消息後就會開始工作。

現在我們重新運行一下示例，發現每個 Page 頁隻會 build 一次，緩存成功瞭。需要註意，如果我們采用 PageView.custom 構建頁面時沒有給列表項包裝 AutomaticKeepAlive 父組件，則上述方案不能正常工作，因為此時Client 發出消息後，找不到 Server，404 瞭。

KeepAliveWrapper

雖然我們可以通過 AutomaticKeepAliveClientMixin 快速的實現頁面緩存功能，但是通過混入的方式實現不是很優雅，因為必須更改 Page 的代碼，有侵入性，這就導致不是很靈活，比如一個組件能同時在列表中和列表外使用，為瞭在列表中緩存它，則我們必須實現兩份。為瞭解決這個問題，筆者封裝瞭一個 KeepAliveWrapper 組件，如果哪個列表項需要緩存，隻需要使用 KeepAliveWrapper 包裹一下它即可。

@override
Widget build(BuildContext context) {
  var children = <Widget>[];
  for (int i = 0; i < 6; ++i) {
    //隻需要用 KeepAliveWrapper 包裝一下即可
    children.add(KeepAliveWrapper(child:Page( text: '$i'));
  }
  return PageView(children: children);
}

下面是 KeepAliveWrapper 的實現源碼：

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper({
    Key? key,
    this.keepAlive = true,
    required this.child,
  }) : super(key: key);
  final bool keepAlive;
  final Widget child;
 
  @override
  _KeepAliveWrapperState createState() => _KeepAliveWrapperState();
}
 
class _KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }
 
  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if(oldWidget.keepAlive != widget.keepAlive) {
      // keepAlive 狀態需要更新，實現在 AutomaticKeepAliveClientMixin 中
      updateKeepAlive();
    }
    super.didUpdateWidget(oldWidget);
  }
 
  @override
  bool get wantKeepAlive => widget.keepAlive;
}

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：