Flutter使用bottomNavigationBar时，如何防止页面重建以保留状态？

一、防止页面切换时重建的两种方法 #

默认BottomNavigationBar切换页面时，未选中的页面会被销毁，要保留第一个页面的状态，推荐这两种方案：

1. 给页面添加AutomaticKeepAliveClientMixin #

在第一个页面的State类里混入这个Mixin，重写wantKeepAlive返回true，记得在build方法里调用super.build(context)——这步不能忘，否则状态还是会丢。

示例代码：

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 告诉框架要保留状态

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则Mixin不生效
    return GoogleMap(
      // 你的地图配置
    );
  }
}

这样切换到其他页面时，这个页面的State不会被dispose，Riverpod的任务能继续运行，地图也不会重新加载。

2. 用PageView搭配BottomNavigationBar #

把所有页面放进PageView，通过底部导航的索引控制PageView的切换。PageView默认会缓存相邻页面，也可以通过控制器调整缓存策略，这样页面切换时不会重建。

示例代码：

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentTab = 0;
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTab,
        onTap: (index) {
          setState(() => _currentTab = index);
          _pageController.jumpToPage(index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.map), label: '地图'),
          BottomNavigationBarItem(icon: Icon(Icons.list), label: '列表'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _currentTab = index),
        children: const [
          MapPage(),
          ListPage(),
          SettingsPage(),
        ],
      ),
    );
  }
}

这种方式下，所有页面的状态都会被PageView维持，切换更丝滑。

二、谷歌地图状态的额外保障 #

除了页面不重建，建议把GoogleMapController用Riverpod或者页面的State存起来——比如定义一个StateProvider<GoogleMapController?>，在地图初始化完成时赋值。这样就算意外重建（虽然我们已经避免了），也能从Provider里恢复地图的摄像头位置、标记等状态。

三、底部导航是不是最佳选择？ #

如果你的核心需求是快速切换页面且保留状态，底部导航完全合适，只要配合上面的状态保留方案就行。

但如果第一个页面的任务资源消耗极大，或者其他页面不需要频繁切换，也可以考虑其他方案：

• 用Navigator.push跳转其他页面：原页面会留在导航栈里，不会被销毁，但切换体验是页面跳转，不是底部导航的切换感。
• 用IndexedStack包裹页面：它会一次性加载所有页面并保留状态，但缺点是启动时会初始化所有页面的提供者和资源，可能拖慢启动速度。

总结：底部导航本身没问题，只要正确处理状态保留就能满足你的需求；如果想兼顾启动性能和状态保留，PageView或AutomaticKeepAliveClientMixin是更优的搭配。

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