flutter刷新页面_Flutter BottomNavigationBar切换会刷新当前页面解决方

问题描述

BottomNavigationBar 是flutter 中最常用的UI组建，刚接触时发现在切换tab 的时候，会刷新当前的所有状态，每个页面都会重新刷新。于是乎，在这里先记录下解决方案。

BottomNavigationBar基本代码

以下Home 是首页，切入三个tab，代码如下：

class Home extends StatefulWidget { @override createState() => _Home();}class _Home extends State { int _currentIndex = 0; List _pages; @override void initState() { _pages = [ new Guild(), new ActivityList(), new Mine(), ]; super.initState(); } @override void dispose() { super.dispose(); _pageController.dispose(); } var _pageController = PageController(); @override Widget build(BuildContext context) { return Scaffold( body: PageView.builder( controller: _pageController, physics: NeverScrollableScrollPhysics(), onPageChanged: _pageChanged, itemCount: _pages.length, itemBuilder: (context, index) => _pages[index]), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, fixedColor: Colors.black,//点击选择 type: BottomNavigationBarType.shifting, onTap: onTabTapped, items: [ BottomNavigationBarItem( //backgroundColor: Theme.of(context).appBarTheme.color icon: Icon(Icons.home), title: Text("公会"), backgroundColor: Theme.of(context).appBarTheme.color), BottomNavigationBarItem( icon: Icon(Icons.notifications), title: Text("活动"), backgroundColor: Theme.of(context).appBarTheme.color), BottomNavigationBarItem( icon: Icon(Icons.person), title: Text("我的"), backgroundColor: Theme.of(context).appBarTheme.color), ], ), ); } void _pageChanged(int index) { setState(() { if (_currentIndex != index) _currentIndex = index; }); } void onTabTapped(int index) { _pageController.jumpToPage(index); }}

这样像简单的写,其实就会出现 切换tab 的时候，重新刷新当前页面的现象，之前保留的状态就会消失。

解决方案

解决方案分为四个步骤(以下我将其中一个页面名字叫做：DemoPage)：

第一步将tab里面的页面DemoPage需要实现 AutomaticKeepAliveClientMixin

第二步设置DemoPage实现代码bool get wantKeepAlive => true;

第三步DemoPage里面实现Widget build(BuildContext context)调用super.build(context);

第四步PageView.builder 设置NeverScrollableScrollPhysics(),//禁止页面左右滑动切换 (可选，好像这部不设置也没关系，具体看实际情况来)

具体 代码如下：

1、class _DemoPageState extends State with AutomaticKeepAliveClientMixin{//要点1

2、 @override

bool get wantKeepAlive => true;//要点2

3、@override

Widget build(BuildContext context) {

super.build(context);//要点3

4、使用PageView构建

PageView.builder(//要点1

physics: NeverScrollableScrollPhysics(),//禁止页面左右滑动切换

controller: _pageController,

onPageChanged: _pageChanged,//回调函数

itemCount: _pages.length,

itemBuilder: (context,index)=>_pages[index]

)

参看文献：

来源：https://www.cnblogs.com/kingbo/p/11430351.html