Flutter+go_router下TabBarView页面状态无法保持的解决方法咨询

一、基于go_router的现有方案优化 #

问题核心是TabBarView默认会销毁非当前显示的页面，这和外层StatefulShellRoute的底部导航状态保持逻辑不冲突，只需给Tab子页面单独做状态留存：

• 给每个TabBarView的子页面（带ListView的页面）混入AutomaticKeepAliveClientMixin，实现wantKeepAlive返回true，并在build方法中必须调用super.build(context)：

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

  @override
  State<TabListPage> createState() => _TabListPageState();
}

class _TabListPageState extends State<TabListPage> with AutomaticKeepAliveClientMixin {
  List<String> _data = [];

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    // 模拟网络请求
    await Future.delayed(const Duration(seconds: 1));
    setState(() => _data = List.generate(20, (i) => 'Tab Item $i'));
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则状态不会被保留
    return _data.isEmpty 
        ? const Center(child: CircularProgressIndicator())
        : ListView.builder(
            itemCount: _data.length,
            itemBuilder: (context, index) => ListTile(title: Text(_data[index])),
          );
  }
}

• 确保PageA本身是StatefulWidget，且已正确配置为StatefulShellRoute的分支，外层底部导航的状态保持逻辑不受影响。

二、放弃go_router的简化方案 #

用传统的IndexedStack管理底部导航页面，配合AutomaticKeepAliveClientMixin处理Tab状态，逻辑更直观：

1. 底部导航状态保持 #

使用IndexedStack替代直接切换页面，确保所有底部页面始终驻留内存：

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentTab = 0;
  final List<Widget> _pages = const [PageA(), PageB(), PageC()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTab,
        onTap: (index) => setState(() => _currentTab = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'PageA'),
          BottomNavigationBarItem(icon: Icons.business, label: 'PageB'),
          BottomNavigationBarItem(icon: Icons.school, label: 'PageC'),
        ],
      ),
      body: IndexedStack(
        index: _currentTab,
        children: _pages,
      ),
    );
  }
}

2. TabBarView内部状态保持 #

和上面的方案一致，给每个Tab子页面混入AutomaticKeepAliveClientMixin，实现状态留存。

额外提示 #

如果网络请求逻辑复杂，建议用状态管理工具（如Riverpod、Provider）将请求的数据缓存到全局或页面级状态中，即使页面意外重建，也能直接从缓存读取数据，避免重复请求。

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