Flutter底部tab切换保持页面状态的几种方法
首先看一下如下视频：
通过视频我们可以看到，当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候，每一次进入页面的时候该页面的数据都会重新加载。那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。
第一种方式：采用IndexdStack
IndexdStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是，IndexdStack在同一时刻只能显示子控件中的一个控件，通过index属性来设置显示的控件。
配置底部导航的核心代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart';
import 'package:flutter_jdshop/pages/tabs/HomePage.dart';
import 'package:flutter_jdshop/pages/tabs/ShoppingCartPage.dart';
import 'package:flutter_jdshop/pages/tabs/UserPage.dart';
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;//记录当前选中哪个页面
List<Widget> _pages = [
HomePage(),
CategoryPage(),
ShoppingCartPage(),
UserPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("JDShop")),
body: this._pages[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red,//底部导航栏按钮选中时的颜色
type: BottomNavigationBarType.fixed,//底部导航栏的适配，当item多的时候都展示出来
currentIndex: this._currentIndex,
onTap: (index){
setState(() {
this._currentIndex = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text("购物车")),
BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的"))
],
),
);
}
}此时还是不可以保持页面状态的。
这里我们将body由
body: this._pages[this._currentIndex],替换成
body: IndexedStack(
index: this._currentIndex,
children: this._pages,
),这样就能够实现保持页面状态了，效果如下：
我们可以看到，此时，页面的数据只在最开始进来的时候进行加载，然后就保持住这个页面的状态了，并不会每次进来都进行数据的加载刷新了。
使用IndexedStack来保持页面状态的优点就是配置简单，但是它也有很大的缺点：IndexedStack中管理的子页面在一开始就全部一次性加载出来了，不管有没有显示出来，然后通过index属性来确定到底显示哪一个页面。
第二种方式：AutomaticKeepAliveClientMixin
如果所有的页面都需要保持页面状态，那么就使用indexdStack；如果有些页面需要保持页面状态，有些页面需要进来就刷新，那么我们就需要使用AutomaticKeepAliveMixin这个类来单独控制某个页面的状态。
AutomaticKeepAliveClientMixin相比IndexdStack，配置起来要复杂一些。
AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态的时候，其配置步骤如下：
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart';
import 'package:flutter_jdshop/pages/tabs/HomePage.dart';
import 'package:flutter_jdshop/pages/tabs/ShoppingCartPage.dart';
import 'package:flutter_jdshop/pages/tabs/UserPage.dart';
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;//记录当前选中哪个页面
//第1步，声明PageController
PageController _pageController;
@override
void initState() {
super.initState();
//第2步，初始化PageController
this._pageController = PageController(initialPage: this._currentIndex);
}
List<Widget> _pages = [
HomePage(),
CategoryPage(),
ShoppingCartPage(),
UserPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("JDShop")),
//第3步，将body设置成PageView,并配置PageView的controller属性
body: PageView(
controller: this._pageController,
children: this._pages,
),
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red,//底部导航栏按钮选中时的颜色
type: BottomNavigationBarType.fixed,//底部导航栏的适配，当item多的时候都展示出来
currentIndex: this._currentIndex,
onTap: (index){
setState(() {
//第4步，设置点击底部Tab的时候的页面跳转
this._currentIndex = index;
this._pageController.jumpToPage(this._currentIndex);
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text("购物车")),
BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的"))
],
),
);
}
}以上前4步都是在tabs.dart中进行配置的，此时所有的页面还是不可保持页面状态的。然后第5步就是在需要保持页面状态的页面里面混入AutomaticKeepAliveClientMixin类，并将wantKeepAlive方法返回为true，如下所示：
//首页页面
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;
//分类页面
class _CategoryPageState extends State<CategoryPage> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive => true;这样，首页页面和分类页面就实现了页面状态的保持，页面数据只在首次进入该页面的时候进行刷新；而其他没有实现页面保持的页面在每次进入该页面的时候，数据都会刷新。
使用AutomaticKeepAliveClientMixin这个类来保持首页和分类页面状态，其效果如下所示：
以上。
腾讯云开发者
