Как сохранить состояние виджетов с помощью BottomNavigationBar во Flutter?

Question

У меня есть BottomNavigationBarв частности, BubbleBottomBar. Я вложил MaterialAppс, чтобы дать новый Navigator к внутренним виджетам. Однако, когда я переключаю вкладки, каждый виджет в нижней панели навигации перестраивается. Это не хорошо для меня, так как я хочу держать виджеты в том же состоянии. Как бы я этого достиг?

Answer 1

Вы можете использовать AutomaticKeepAliveClientMixin для принудительного удаления содержимого нижней панели. Но чтобы эта вещь работала, вам, возможно, придется BottomNavigationBar внутри Stateful Widget,

Я думаю, что этот вопрос может иметь подробный ответ, который вы ищете.

Пример:

class CustomBottomBar extends StatefulWidget {
  @override
  _CustomBottomBarState createState() => _CustomBottomBarState();
}

class _CustomBottomBarState extends State<CustomBottomBar> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return BubbleBottomBar(
      /*Your bottom bar code goes here*/
    );
  }

  // Setting it true will force the bottom bar to never be disposed. This could be dangerous.
  @override
  bool get wantKeepAlive => true;
}

Answer 2

Я думаю, что вы можете легко решить эту проблему с помощью CupertinoTabScaffold&CuppertinoTabBar&CupertinoTabView у него есть эта особенность.

прочитайте больше о там, если вам нужно: Виджеты Купертино

официальный пример: навигация Купертино и TabBar

это мой код, он работает так, как вы хотите, чтобы он работал (не перестраивая при смене вкладок), вы можете преобразовать его в свой:

import 'package:flutter/cupertino.dart';

CupertinoTabScaffold(
          tabBar: CupertinoTabBar(items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.explore), title: Text('Explore')),
            BottomNavigationBarItem(
                icon: Icon(Icons.card_travel), title: Text('Adventure')),
            BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text('Search')),
            BottomNavigationBarItem(
                icon: Icon(Icons.collections_bookmark),
                title: Text('Bookmarks')),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('Profile')),
          ]),
          tabBuilder: (context, index) {
            return CupertinoTabView(
              builder: (context) {
                switch (index) {
                  case 0:
                    return ExplorePage();
                    break;
                  case 1:
                    return AdventurePage();
                    break;
                  case 2:
                    return SearchTourPage();
                    break;
                  case 3:
                    return Text('Bookmark Page');
                    break;
                  case 4:
                    return ProfilePage();
                    break;
                  default:
                    return SearchTourPage();
                }
              },
            );
          })