Flutter 解決TarBarView跨Tab跳轉會導致頁面重複的問題

問題描述

在沒有開啓過Tab2情況下, 從Tab1直接跳轉到Tab3時, Tab2會自動創建爲與Tab1樣式一致的頁面, 此時再進入Tab2時就會發現Tab2與Tab1時完全一致的頁面.

---

問題原因

測試發現, 如果從Tab1跳入Tab2時, 僅會執行Tab2頁面的initState; 如果是從Tab1跳轉到Tab3時, 會首先執行Tab1頁面的initState, 然後再執行Tab3頁面的initState, 懷疑Tab1頁面的initState時爲Tab2創建的, 所以纔會出現Tab2與Tab1頁面一致的問題.

考慮爲什麼會再次執行與即將轉入的Tab3並不相關的Tab1初始化, 懷疑可能是因爲加入了AutomaticKeepAliveClientMixin 以維持各界面狀態的原因.

abstract class XXState<T extends StatefulWidget> extends State<T> with AutomaticKeepAliveClientMixin {
	  @override
	  void initState() {
	    super.initState();
	  }
	
	  @override
	  bool get wantKeepAlive => true;
	
	  @override
	  Widget build(BuildContext context) {
	    super.build(context);
	    ...
	  }
}

刪除了AutomaticKeepAliveClientMixin之後再測試, 問題果然消失了.

---

其他做法

上面的方法只是規避了這個問題, 但是保存各界面狀態的功能也不能使用了, 有沒有不刪除AutomaticKeepAliveClientMixin的辦法呢?
這裏也可以使用給各個頁面添加key的方式來解決.

class XXTabPage extends StatefulWidget {

  // 不添加key的話跨tab跳轉時會導致頁面重複
  NewsListPage() : super(key: Key(Random().nextDouble().toString()));

  @override
  State<StatefulWidget> createState() {
  	...
  }
}