如何在Flutter中跨页面复用StatefulWidget并保留其状态？

核心思路 #

不要依赖State对象本身来保存状态，而是把需要保留的状态属性抽成独立的可共享数据类，通过Widget参数在页面间传递这个数据实例，这样无论Widget在哪个页面重建，都能复用同一套状态数据。

具体实现步骤 #

1. 定义独立的状态数据类

把侧边栏需要保留的状态（比如选中索引、展开状态等）封装在一个普通类中：

class SidebarStateData {
  int selectedIndex;
  bool isExpanded;

  // 初始化默认值
  SidebarStateData({this.selectedIndex = 0, this.isExpanded = true});
}

2. 修改自定义侧边栏Widget

让Widget接收SidebarStateData实例作为参数，State直接操作这个外部传入的数据：

class CustomSidebar extends StatefulWidget {
  final SidebarStateData stateData;

  const CustomSidebar({super.key, required this.stateData});

  @override
  State<CustomSidebar> createState() => _CustomSidebarState();
}

class _CustomSidebarState extends State<CustomSidebar> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('首页'),
            selected: widget.stateData.selectedIndex == 0,
            onTap: () {
              setState(() {
                widget.stateData.selectedIndex = 0;
              });
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('设置'),
            selected: widget.stateData.selectedIndex == 1,
            onTap: () {
              setState(() {
                widget.stateData.selectedIndex = 1;
              });
              Navigator.pop(context);
            },
          ),
          SwitchListTile(
            title: const Text('展开侧边栏'),
            value: widget.stateData.isExpanded,
            onChanged: (value) {
              setState(() {
                widget.stateData.isExpanded = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

3. 在页面间共享状态实例

在初始化的页面创建SidebarStateData实例，后续页面通过构造函数接收这个实例：

class HomePage extends StatelessWidget {
  // 全局唯一的状态实例
  final SidebarStateData sidebarState = SidebarStateData();

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      drawer: CustomSidebar(stateData: sidebarState),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(sidebarState: sidebarState),
              ),
            );
          },
          child: const Text('跳转到第二页'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final SidebarStateData sidebarState;

  const SecondPage({super.key, required this.sidebarState});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第二页')),
      drawer: CustomSidebar(stateData: sidebarState),
      body: Center(child: const Text('第二页内容')),
    );
  }
}

为什么你之前的方法失效？ #

• GlobalKey方案：首页路由仍在导航栈中，同一Key被两个Widget实例同时使用，违反Flutter的Key唯一性规则，必然报错。
• 复用State对象方案：State对象与Widget强绑定，一旦关联到某个Element就无法被其他Widget复用；而克隆状态的方式会丢失State与Widget的响应式关联，且新页面创建Widget时必然触发initState，导致状态重置。

关于options参数传递状态的疑问 #

这确实是轻量场景下的通用方案，本质就是将状态与Widget解耦，通过参数传递共享状态实例。这种方案完全适合你的需求（状态属性少），不需要引入复杂的状态管理框架，代码简洁、易维护。

进阶优化（可选） #

如果需要状态变化自动通知所有页面的侧边栏更新，可以给状态类添加ChangeNotifier，配合Consumer实现响应式更新：

class SidebarStateData extends ChangeNotifier {
  int _selectedIndex = 0;
  bool _isExpanded = true;

  int get selectedIndex => _selectedIndex;
  bool get isExpanded => _isExpanded;

  set selectedIndex(int value) {
    _selectedIndex = value;
    notifyListeners();
  }

  set isExpanded(bool value) {
    _isExpanded = value;
    notifyListeners();
  }
}

然后修改State的build方法：

@override
Widget build(BuildContext context) {
  return Consumer<SidebarStateData>(
    builder: (context, stateData, child) {
      return Drawer(
        // 使用stateData的属性构建UI
      );
    },
  );
}

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