Flutter BottomNavigationBar切换时如何刷新页面Build Context？

问题原因 #

你当前的实现用IndexedStack管理底部导航页面，这个组件会缓存所有子页面的状态，切换索引只是显示/隐藏页面，不会重新调用页面的build方法。所以当页面内容修改后，通过底部导航切回来时，页面还是之前缓存的旧实例，无法同步最新内容。

可行修改方案 #

方案一：移除IndexedStack，直接切换当前页面的Navigator #

这种方式会在切换底部导航时重新创建对应页面的Navigator实例，确保页面触发build，同时保留每个tab的导航栈（通过navigatorkey维护）。

修改_PersistentBottomBarScaffoldState的build方法：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      if (widget.items[_selectedTab].navigatorkey?.currentState?.canPop() ?? false) {
        widget.items[_selectedTab].navigatorkey?.currentState?.pop();
        return false;
      } else {
        return false; // 可根据需求调整是否允许退出App
      }
    },
    child: Scaffold(
      // 移除IndexedStack，直接返回当前选中的Navigator
      body: Navigator(
        key: widget.items[_selectedTab].navigatorkey,
        onGenerateInitialRoutes: (navigator, initialRoute) {
          return [
            MaterialPageRoute(builder: (context) => widget.items[_selectedTab].tab)
          ];
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: white,
        currentIndex: _selectedTab,
        selectedItemColor: Colors.pink,
        unselectedItemColor: Colors.purple,
        unselectedLabelStyle: TextStyle(color: Colors.purple),
        type: BottomNavigationBarType.fixed,
        selectedIconTheme: IconThemeData(color: Colors.pink),
        onTap: (index) {
          if (index == _selectedTab) {
            widget.items[index].navigatorkey?.currentState
                ?.popUntil((route) => route.isFirst);
          } else {
            setState(() {
              _selectedTab = index;
            });
          }
        },
        items: widget.items
            .map((item) => BottomNavigationBarItem(
                  icon: Icon(item.icon),
                  label: item.title,
                ))
            .toList(),
      ),
    ),
  );
}

方案二：保留IndexedStack，用动态Key强制页面刷新 #

如果需要保留页面导航栈，但切换时要强制刷新内容，可以给每个页面添加动态Key，切换时更新Key触发重新构建。

1. 修改PersistentTabItem类：

class PersistentTabItem {
  final Widget Function() tabBuilder; // 改为构建函数，方便生成带Key的页面
  final GlobalKey<NavigatorState>? navigatorkey;
  final String title;
  final IconData icon;

  PersistentTabItem({
    required this.tabBuilder,
    this.navigatorkey,
    required this.title,
    required this.icon,
  });
}

2. 修改MainNavigator中创建PersistentTabItem的代码：

return PersistentBottomBarScaffold(
  items: [
    PersistentTabItem(
      tabBuilder: () => PageOne(key: UniqueKey()), // 每次生成新的UniqueKey
      icon: Icons.home,
      title: 'home',
      navigatorkey: _tab1navigatorKey,
    ),
    PersistentTabItem(
      tabBuilder: () => PageTwo(key: UniqueKey()),
      icon: Icons.currency_rupee,
      title: 'expense',
      navigatorkey: _tab2navigatorKey,
    ),
    PersistentTabItem(
      tabBuilder: () => PageThree(key: UniqueKey()),
      icon: Icons.person,
      title: 'staff',
      navigatorkey: _tab3navigatorKey,
    ),
  ],
);

3. 修改PersistentBottomBarScaffold的body和onTap逻辑：

class _PersistentBottomBarScaffoldState extends State<PersistentBottomBarScaffold> {
  int _selectedTab = 0;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (widget.items[_selectedTab].navigatorkey?.currentState?.canPop() ?? false) {
          widget.items[_selectedTab].navigatorkey?.currentState?.pop();
          return false;
        } else {
          return false;
        }
      },
      child: Scaffold(
        body: IndexedStack(
          index: _selectedTab,
          children: widget.items
              .map((page) => Navigator(
                    key: page.navigatorkey,
                    onGenerateInitialRoutes: (navigator, initialRoute) {
                      return [
                        MaterialPageRoute(builder: (context) => page.tabBuilder())
                      ];
                    },
                  ))
              .toList(),
        ),
        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: white,
          currentIndex: _selectedTab,
          selectedItemColor: Colors.pink,
          unselectedItemColor: Colors.purple,
          unselectedLabelStyle: TextStyle(color: Colors.purple),
          type: BottomNavigationBarType.fixed,
          selectedIconTheme: IconThemeData(color: Colors.pink),
          onTap: (index) {
            if (index == _selectedTab) {
              widget.items[index].navigatorkey?.currentState
                  ?.popUntil((route) => route.isFirst);
            } else {
              setState(() {
                _selectedTab = index;
              });
            }
          },
          items: widget.items
              .map((item) => BottomNavigationBarItem(
                    icon: Icon(item.icon),
                    label: item.title,
                  ))
              .toList(),
        ),
      ),
    );
  }
}

方案选择 #

• 方案一适合不需要保留页面滚动位置等状态的场景，每次切换都能确保显示最新数据。
• 方案二适合需要保留页面导航栈，但又要刷新内容的场景，通过UniqueKey强制Flutter重建页面。
• 如果用状态管理（如Provider、Riverpod）维护数据，也可以在onTap中手动通知状态更新，让页面自动响应变化，无需修改导航结构。

内容的提问来源于stack exchange，提问作者RAF Algowid