Flutter：切换Drawer导航页面时如何保留子组件状态？

我来帮你解决这个问题！你遇到的核心问题是每次切换抽屉项时都重新创建了新的组件实例，导致之前的状态完全丢失——哪怕用了AutomaticKeepAliveClientMixin也没用，毕竟组件都换了，Mixin自然无法保留旧实例的状态。而IndexedStack会预加载所有子组件，不符合你懒加载的需求。下面给你一个完美的解决方案：

解决方案：复用组件实例 + AutomaticKeepAliveClientMixin #

这个方案能实现：

• 子组件仅在首次被选中时加载（懒加载）
• 切换返回时保留之前的状态，不会重新发起API请求

步骤1：在父组件中提前初始化子组件实例

不要每次点击都new FirstWidget()，而是在_DrawerState中提前创建好两个子组件的实例，切换时直接复用它们：

class _DrawerState extends State<DrawerWidget> {
  // 提前初始化两个子组件的实例，复用它们而不是每次创建新的
  final FirstWidget _firstWidget = FirstWidget();
  final SecondWidget _secondWidget = SecondWidget();
  Widget _activeWidget;

  @override
  void initState() {
    _activeWidget = _firstWidget;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Drawer demo")),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            ListTile(
              title: Text("First Widget"),
              onTap: () {
                setState(() {
                  _activeWidget = _firstWidget; // 复用已有的实例
                });
                Navigator.pop(context); // 切换后关闭抽屉，体验更好
              },
            ),
            ListTile(
              title: Text("Second Widget"),
              onTap: () {
                setState(() {
                  _activeWidget = _secondWidget; // 复用已有的实例
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: _activeWidget,
    );
  }
}

步骤2：子组件实现AutomaticKeepAliveClientMixin

给FirstWidget和SecondWidget添加Mixin，确保它们的状态被保留。注意必须调用super.build(context)，否则Mixin不会生效：

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> with AutomaticKeepAliveClientMixin {
  String _apiData = "加载中...";

  @override
  void initState() {
    super.initState();
    // 首次加载时发起API请求，之后切换回来不会再执行
    _fetchDataFromApi();
  }

  Future<void> _fetchDataFromApi() async {
    // 模拟API请求
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      _apiData = "First Widget 从API获取的数据";
    });
  }

  @override
  Widget build(BuildContext context) {
    // 一定要调用super.build，否则AutomaticKeepAlive不生效
    super.build(context);
    return Center(child: Text(_apiData));
  }

  // 返回true表示需要保留组件状态
  @override
  bool get wantKeepAlive => true;
}

SecondWidget的实现和上面完全一致，只需要替换对应的API请求逻辑即可。

为什么这个方案有效？ #

1. 复用实例：我们不再每次创建新的子组件，而是始终使用同一个实例，这样Flutter不会销毁之前的组件状态。
2. 懒加载：子组件的initState只有在首次被显示时才会执行（也就是第一次点击对应的抽屉项），不会预加载未选中的组件。
3. 状态保留：AutomaticKeepAliveClientMixin告诉Flutter，这个组件的状态需要被保留，即使它暂时不在屏幕上。

验证效果 #

• 第一次点击"First Widget"：发起API请求，加载数据，显示内容。
• 切换到"Second Widget"：首次加载它的API数据。
• 切回"First Widget"：直接显示之前加载好的数据，不会重新发起请求。

完美符合你的需求！

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