如何在 Flutter 中使用 BottomNavigationBar 保留 Widget 的状态？ [复制]

Question

我有一个BottomNavigationBar，特别是BubbleBottomBar。我已经嵌套了MaterialApps 来为内部小部件提供一个新的Navigator。但是，当我切换选项卡时，底部导航栏中的每个小部件都会重新构建。这对我不利，因为我想让小部件保持相同状态。我将如何实现这一目标？

Answer 1

我认为您可以使用 CupertinoTabScaffold&CuppertinoTabBar&CupertinoTabView 轻松解决该问题，它具有该功能。

如果需要，请阅读更多信息：Cupertino Widgets

官方示例：Cupertino Navigation&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();
                }
              },
            );
          })

Answer 2

您可以使用AutomaticKeepAliveClientMixin 强制您的底栏内容不被释放。但是要让这件事起作用，您可能必须将您的 BottomNavigationBar 包裹在 Stateful Widget 中。

我认为this question 可能有您正在寻找的详细答案。

例子：

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;
}