【Flutter】BottomNavigationBar切换页面被重置问题（保存状态）
@override bool get wantKeepAlive => true;
但发现需要配合其他组件，不是随便mixin就有用的，尝试几种写法总结BottomNavigationBar+List+AutomaticKeepAliveClientMixin是没有用的
- 首先尝试BottomNavigationBar+List实现的页面切换保持状态，一般刚开始学都会这么写：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: "demo",
home: MainPage(),
);
}
class MainPage extends StatefulWidget {
@override
StatecreateState() => MainPageState();
}
class MainPageState extends State{
int _currentIndex;
List_pages;
@override
void initState() {
super.initState();
_currentIndex = 0;
_pages = List()..add(FirstPage("第一页"))..add(SecondPage("第二页"))..add(ThirdPage("第三页"));
}
@override
Widget build(BuildContext context) => Scaffold(
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: getItems(),
currentIndex: _currentIndex,
onTap: onTap,
),
);
ListgetItems() {
return [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(icon: Icon(Icons.adb), title: Text("Adb")),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Person"))
];
}
void onTap(int index) {
setState(() {
_currentIndex = index;
});
}
}
子页面代码,三个界面一样：
class FirstPage extends StatefulWidget {
String _title;
FirstPage(this._title);
@override
StatecreateState() => FirstPageState();
}
class FirstPageState extends Statewith AutomaticKeepAliveClientMixin{
int _count = 0;
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget._title),
),
body: Center(
child: Text(widget._title + ":点一下加1：$_count"),
),
floatingActionButton: FloatingActionButton(
heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
);
}
void add() {
setState(() {
_count++;
});
}
}
结果无法实现保持页面
第一个.
2.第二种BottomNavigationBar+PageView，与android的ViewPager类似,界面小改动一下，添加一个按钮，点击跳转到一个新的界面
代码如下：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: "demo",
home: MainPage(),
);
}
class MainPage extends StatefulWidget {
@override
StatecreateState() => MainPageState();
}
class MainPageState extends State{
int _currentIndex;
List_pages;
PageController _controller;
@override
void initState() {
super.initState();
_currentIndex = 0;
_pages = List() ..add(FirstPage("第一页")) ..add(SecondPage("第二页")) ..add(ThirdPage("第三页"));
_controller = PageController(initialPage: 0);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) => Scaffold(
body: PageView.builder(
physics: NeverScrollableScrollPhysics(),//viewPage禁止左右滑动
onPageChanged: _pageChange,
controller: _controller,
itemCount: _pages.length,
itemBuilder: (context, index) => _pages[index]),
bottomNavigationBar: BottomNavigationBar(
items: getItems(),
currentIndex: _currentIndex,
onTap: onTap,
),
);
ListgetItems() {
return [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(icon: Icon(Icons.adb), title: Text("Adb")),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Person"))
];
}
void onTap(int index) {
_controller.jumpToPage(index);
}
void _pageChange(int index) {
setState(() {
if (index != _currentIndex) {
_currentIndex = index;
}
});
}
}
子界面：
class FirstPage extends StatefulWidget {
String _title;
FirstPage(this._title);
@override
StatecreateState() => FirstPageState();
}
class FirstPageState extends Statewith AutomaticKeepAliveClientMixin {
int _count = 0;
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget._title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Text(widget._title + ":点一下加1：$_count"),
MaterialButton(
child: Text("跳转"),
color: Colors.pink,
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => NewPage())))
],
),
),
floatingActionButton: FloatingActionButton(
heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
);
}
void add() {
setState(() {
_count++;
});
}
}
需要跳转的一个界面：
class NewPage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text("新的界面"),
),
body: Center(
child: Text("我是一个新的界面"),
),
);
}
2.
猛一看效果出来了，左右切换界面没有问题，结果跳转新界面时又出现新问题，当第一页跳转新的界面再返回，再切第二、三页发现重置了，再切回第一页发现页被重置了。
发生这种情况需要在重写Widget build(BuildContext context)时调用下父类build(context)方法，局部代码：
@override
Widget build(BuildContext context) {
//在这边加上super.build(context);
super.build(context);
return Scaffold(
appBar: AppBar(
title: Text(widget._title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Text(widget._title + ":点一下加1：$_count"),
MaterialButton(
child: Text("跳转"),
color: Colors.pink,
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => NewPage())))
],
),
),
floatingActionButton: FloatingActionButton(
heroTag: widget._title, child: Icon(Icons.add), onPressed: add),
);
}
第三个.
这种布局样式网上还有一种用的比较多的是BottomNavigationBar+Stack+Offstage，这边就不贴出来了
- 最近发现最好的实现是BottomNavigationBar+TabBarView，
BottomNavigationBar+ PageView的话如果给PageView加翻页动画话的第一页直接切换第三页，翻页动画不是很流畅，因为是第一页翻到第三页，而TabBarView切换起来就非常完美
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends Statewith SingleTickerProviderStateMixin {
TabController _controller;
ListbottomTabs;
int _currentIndex = 0;
@override
void initState() {
super.initState();
bottomTabs = List()
..add(_buildBottomNavItem("assets/images/index_phone_unselect.png",
"assets/images/index_phone_select.png", "首页"))
..add(_buildBottomNavItem("assets/images/index_package_unselect.png",
"assets/images/index_package_select.png", "包啊"))
..add(_buildBottomNavItem("assets/images/index_found_unselect.png",
"assets/images/index_found_select.png", "发现"))
..add(_buildBottomNavItem("assets/images/index_person_unselect.png",
"assets/images/index_person_select.png", "我的"));
_controller = TabController(length: bottomTabs.length, vsync: this);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
fixedColor: Color(0xFF333333),
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: _bottomNavBarClick,
items: bottomTabs),
body: TabBarView(
physics: NeverScrollableScrollPhysics(), //禁止滚动
controller: _controller,
children: [
PhonePage(),
PackagePage(),
FoundPage(),
PersonalPage(),
]),
);
}
_bottomNavBarClick(index) {
setState(() {
_currentIndex = index;
});
_controller.animateTo(_currentIndex);
}
BottomNavigationBarItem _buildBottomNavItem(
String icon, String activeIcon, String name) {
double height = 28.0, width = 28.0;
return BottomNavigationBarItem(
icon: Image.asset(icon, height: height, width: width),
activeIcon: Image.asset(activeIcon, height: height, width: width),
title: Text(name));
}
}
最后像这种多页面使用FloatingActionButton，用它跳转新界面是一定要设置heroTag，要不然跳转会黑屏报错
