底部 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;
}