时间戳

首页 > 解决方案 > 如何在 Flutter 中使用 BottomNavigationBar 保留 Widget 的状态？

dart - 如何在 Flutter 中使用 BottomNavigationBar 保留 Widget 的状态？

问题描述

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

标签： dartflutterflutter-navigation

解决方案

我认为您可以通过使用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();
                }
              },
            );
          })

推荐阅读