Flutter切换页面时如何避免屏幕重载并保留页面数据？

核心思路 #

• 用IndexedStack管理A、B、C三个页面，它会缓存所有子页面的状态，切换时不会重建组件
• 每个页面通过AutomaticKeepAliveClientMixin实现状态持久化，确保首次加载数据后，后续切换不再重新请求

具体实现步骤 #

1. 定义带状态缓存的页面组件 #

每个页面（A/B/C）都继承StatefulWidget并混入AutomaticKeepAliveClientMixin，在initState里完成首次数据加载：

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

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> with AutomaticKeepAliveClientMixin {
  List<String>? _data;

  @override
  void initState() {
    super.initState();
    // 首次加载数据，仅执行一次
    _loadData();
  }

  Future<void> _loadData() async {
    // 模拟网络请求或本地数据加载
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      _data = ['A页面数据1', 'A页面数据2', 'A页面数据3'];
    });
  }

  @override
  bool get wantKeepAlive => true; // 开启状态缓存开关

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则状态无法保留
    return Scaffold(
      appBar: AppBar(title: const Text('页面A')),
      body: _data == null
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _data!.length,
              itemBuilder: (context, index) => ListTile(title: Text(_data![index])),
            ),
    );
  }
}

PageB和PageC的实现逻辑和PageA完全一致，只需修改页面标题和数据加载的具体内容即可。

2. 主页面集成抽屉与页面缓存管理 #

主页面通过Scaffold的drawer属性实现抽屉导航，用IndexedStack根据当前选中索引展示对应页面，抽屉列表项点击时更新索引并关闭抽屉：

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

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

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0; // 默认选中页面A

  // 预加载所有页面，交由IndexedStack缓存
  final List<Widget> _pages = const [
    PageA(),
    PageB(),
    PageC(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('抽屉导航示例')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('导航菜单'),
            ),
            ListTile(
              title: const Text('页面A'),
              selected: _currentIndex == 0,
              onTap: () {
                setState(() => _currentIndex = 0);
                Navigator.pop(context); // 切换后关闭抽屉
              },
            ),
            ListTile(
              title: const Text('页面B'),
              selected: _currentIndex == 1,
              onTap: () {
                setState(() => _currentIndex = 1);
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('页面C'),
              selected: _currentIndex == 2,
              onTap: () {
                setState(() => _currentIndex = 2);
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
    );
  }
}

关键说明 #

• IndexedStack：一次性创建所有子组件并保持其状态，切换时仅控制显示对应索引的页面，不会触发组件重建
• AutomaticKeepAliveClientMixin：必须重写wantKeepAlive返回true，且build方法中要调用super.build(context)，才能确保页面数据、滚动位置等状态被持久化
• 数据加载放在initState：该方法仅在组件首次创建时执行一次，完美匹配"首次加载、后续复用"的需求

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