Question

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

Answer 1

您可以使用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;
}

Answer 2

我认为您可以使用具有此功能的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();
                }
              },
            );
          })

如何在Flutter中使用BottomNavigationBar保留小部件的状态？

2 个答案: