Как сохранить состояние между вкладками (TabBar) в Flutter?

Question

У меня есть TabBarView с 3 TabBar. Когда я нахожусь на вкладке 1, я что-то делаю, затем я перехожу на вкладку 2, когда я возвращаюсь к вкладке 1, я хочу, чтобы предыдущее состояние вкладки 1 не изменилось.

Как этого добиться в Flutter ?

Ниже скриншот моего кода

class _LandingPageState extends State<LandingPage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  PageController pageController;
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    pageController = PageController(initialPage: 0)
      ..addListener(() {
        setState(() {
          _selectedIndex = pageController.page.floor();
        });
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
              bottomNavigationBar: BottomNavigationBar(
              currentIndex: _selectedIndex,
              onTap: (index) {
                setState(() {
                  _selectedIndex = index;
                  tabController.animateTo(index,
                      duration: Duration(microseconds: 300),
                      curve: Curves.bounceIn);
                });
              },
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.assignment), title: Text("Các yêu cầu")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.history), title: Text("Lịch sử")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person), title: Text("Hồ sơ")),
              ]),
          body: TabBarView(
              controller: tabController,
              children: [
                RequestPage(key: PageStorageKey<String>("request_page"),),
                HistoryPage(key: PageStorageKey<String>("history_page")),
                ProfilePage(key: PageStorageKey<String>("profile_page"))])
          ),
    );
  }

Answer 1

Убедитесь, что все ваши TabBarView дочерние элементы StatefulWidgets, а затем добавьте AutomaticKeepAliveClientMixin примерно так во всех них, например, для вашего RequestPage, это должно выглядеть так:

class RequestPage extends StatefulWidget {
  RequestPage({Key key}) : super(key: key);

  @override
  _RequestPageState createState() => _RequestPageState();
}

class _RequestPageState extends State<RequestPage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return // Your widget tree
  }

  @override
  bool get wantKeepAlive => true;
}

Answer 2

Попробуйте AutomaticKeepAliveClientMixin и переопределите wantKeepAlive, чтобы всегда возвращать true

Answer 3

Как тело Scaffold Используйте IndexedStack для сохранения состояния. Пример:

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            currentIndex: _selectedIndex,
            items: [
              BottomNavigationBarItem(
                ...
              ),
              BottomNavigationBarItem(
                ...
              ),
            ],
          ),
          body: IndexedStack(
            children: <Widget>[
              PageOne(),
              PageTwo(),
            ],
            index: _selectedIndex,
          ),
        );
      }