底部 Tab 切換保持頁面狀態的幾種 方法

一、IndexedStack 保持頁面狀態

IndexedStack 和 Stack 一樣，都是層布局控件， 可以在一個控件上面放置另一個控件，但唯一不同的是 IndexedStack 在同一時刻只能顯示子控件中的一個控件，通過 Index 屬性來設置顯示的控件。

IndexedStack 來保持頁面狀態的優點就是配置簡單。IndexedStack 保持頁面狀態的缺點就是不方便單獨控制每個頁面的狀態。 

 

int _currentIndex=0;

List<Widget> _pageList=[
  HomePage(),
  CategoryPage(),
  CartPage(),
  UserPage()
];

body:IndexedStack(
  index: this._currentIndex,
  children: _pageList,
),

二、AutomaticKeepAliveClientMixin 保持頁面狀態 

AutomaticKeepAliveClientMixin 結合 tab 切換保持頁面狀態相比 IndexedStack 而言配置起來稍微有些復雜。它結合底部 BottomNavigationBar 保持頁面狀態的時候需要進行如下配置。

   var _pageController;

void initState() {
  super.initState();
  _pageController = new PageController(initialPage: _currentIndex);
}

body: PageView(
controller: _pageController,
children: this._pageList,
onPageChanged: (index){
  _currentIndex = index;
  }, 
)

bottomNavigationBar: BottomNavigationBar( 
currentIndex:this._currentIndex ,
onTap: (index){ setState(() {
  _pageController.jumpToPage(this._currentIndex); }); 
},

需要保存狀態的頁面引入

class _HttpPage extends State with AutomaticKeepAliveClientMixin {
  bool get wantKeepAlive => true;
}