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