在之前的一篇博客Flutter 使用 BottomAppBar 自定義底部導(dǎo)航（中間浮出按鈕）中基本實(shí)現(xiàn)了點(diǎn)擊底部Tab切換頁(yè)面Page的操作熄阻，但是呢铺呵，有些問題靠益。
問題闡述
之前的實(shí)現(xiàn)方法中，每次切換Page都會(huì)重新build一次记焊，這樣如果是列表頁(yè)就會(huì)發(fā)現(xiàn)酣溃，滑動(dòng)列表一段距離瘦穆，切換Tab再切換回來，列表會(huì)回到頂端赊豌，實(shí)際上就是這個(gè)頁(yè)面被重繪了，這種效果顯然是不可以的绵咱，所以本篇文章將會(huì)修復(fù)相關(guān)問題碘饼。
解決問題
我是將之前的body的Widget改為
PageView熙兔，然后用底部的Tab和PageView進(jìn)行聯(lián)動(dòng)。如果僅僅改為PageView的話艾恼，還是會(huì)和以前的效果一樣住涉，PageView切換頁(yè)面的話同樣會(huì)重繪。具體原因分析參考這篇博客Flutter: PageView/TabBarView等控件保存狀態(tài)的問題解決方案钠绍。Tips：我采用的是博客中提到的方案二：修改PageView的cacheExtent舆声。MyPageView
相關(guān)代碼
更改body
body: MyPageView(
pages.length, //需要緩存的頁(yè)面?zhèn)€數(shù)
onPageChanged: (index) {
setState(() {
currentIndex = controller.page.round();
});
},
children: pages,
controller: controller,
),
pages即PageView需要展示的每個(gè)頁(yè)面；通過
controller.page.round();獲取PageView顯示的index柳爽，賦值給currentIndex媳握，用于與底部Tab進(jìn)行聯(lián)動(dòng)；controller即PageController磷脯。
底部Tab點(diǎn)擊聯(lián)動(dòng)
onTap: () {
if (currentIndex != index) {
setState(() {
currentIndex = index;
controller.animateToPage(index,
duration: Duration(milliseconds: 300), curve: Curves.ease);
});
}
},
以上是我實(shí)現(xiàn)的方式蛾找，并非唯一，僅供參考赵誓。
