Flutter - BottomNavigationBar底部導航欄切換后，狀態丟失

如果你用過BottomNavigationBar、TabBar、還有Drawer，你就會發現，在切換頁面之后，原來的頁面狀態就會丟失。

要是上一頁有一個數據列表，很多數據，你滾動到了下頭，切換頁面后，想再看一下下頭的數據，但是Flutter給你重回頁面了。。。

這誰能頂得住啊。

 

 

看了一下解釋，原來Flutter中為了節約內存不會保存widget的狀態，widget都是臨時變量。

不過還是有很多辦法解決的，網上傳言用 AutomaticKeepAliveClientMixin 配合

@override
bool get wantKeepAlive => true;

 

服用，效果會達到保持狀態。但是這個方法貌似只對TabBar起作用，BottomNavigationBar 對 AutomaticKeepAliveClientMixin 有免疫，不起作用。

 

后來一頓猛於虎的番羽土嗇操作后，還是找到了解決方案，完美實現BottomNavigationBar底部導航欄切換，狀態保持。

 

答案就是body使用IndexedStack即可。

 

參考我的代碼：

import 'package:flutter/material.dart';

import './pages/home_page.dart';
import './pages/book_page.dart';
import 'package:bottom_nav_bar_test/pages/movie_page.dart';
import 'package:bottom_nav_bar_test/pages/music_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation',
      home: Main(),
      theme: ThemeData(primaryColor: Colors.orange),
    );
  }
}

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  int _currentIndex = 0;
  final List<Widget> _children = [Home(), Book(), Music(), Movie()];

  final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: Text('Book'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_video),
        title: Text('Music'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text('Movie'),
        //backgroundColor: Colors.orange
        ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: _list,
      ),
      //body: _children[_currentIndex],
 body: IndexedStack(
        index: _currentIndex,
        children: _children,
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

 

 

參考 https://stackoverflow.com/questions/53011686/flutter-automatickeepaliveclientmixin-is-not-working-with-bottomnavigationbar 中 hfimy 的回答。