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

问题描述

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

BottomNavigationBar基本代码

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

class Home extends StatefulWidget {
  @override
  createState() => _Home();
}

class _Home extends State<Home> {
  int _currentIndex = 0;
  List<Widget> _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）：

1. 第一步将tab里面的页面DemoPage需要实现 AutomaticKeepAliveClientMixin
2. 第二步设置DemoPage 实现代码 bool get wantKeepAlive => true;
3. 第三步DemoPage 里面实现 Widget build(BuildContext context) 调用 super.build(context);
4. 第四步 PageView.builder 设置NeverScrollableScrollPhysics(),//禁止页面左右滑动切换 （可选，好像这部不设置也没关系，具体看实际情况来）
   

具体 代码如下：

1、class _DemoPageState extends State<DemoPage> 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://blog.csdn.net/tgbus18990140382/article/details/81181879（这个好像没起什么作用啊）

https://stackoverflow.com/questions/52598900/flutter-bottomnavigationbar-rebuilds-page-on-change-of-tab

https://blog.csdn.net/weixin_34121282/article/details/88241346