Flutter技术问题：如何避免Scaffold抽屉组件被重复重建？

问题：使用以下代码实现抽屉时，每次关闭再打开Drawer，内部组件树都会被重建，折叠标签开合状态、文本输入内容这类状态会全部丢失。

初始代码：

Scaffold(
  drawer: Drawer(child: MyWidget),
  body: ...
);

之前尝试过AutomaticKeepAlive方案但未生效：

Scaffold(
  drawer: AutomaticKeepAlive(child: Drawer(child: MyWidget)),
  body: ...
);

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  
  @override
  Widget build(BuildContext context) {
    super.build(context);
    ...
  }
}

为什么AutomaticKeepAlive没用？ #

因为Drawer在关闭时会被完全从组件树中移除，AutomaticKeepAlive仅能在组件树内保留状态，组件被移除后自然无法起作用。

两种可行解决方案 #

方案一：用GlobalKey保存状态

给抽屉内的StatefulWidget绑定GlobalKey，即使Drawer重建，状态也能通过key保留下来。

代码示例：

// 在父组件中定义GlobalKey
final GlobalKey<_MyWidgetState> _drawerKey = GlobalKey();

Scaffold(
  drawer: Drawer(child: MyWidget(key: _drawerKey)),
  body: ...
);

class MyWidget extends StatefulWidget {
  const MyWidget({super.key}); // 接收GlobalKey

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isExpanded = false;
  String _inputText = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ExpansionTile(
          title: const Text('折叠面板'),
          expanded: _isExpanded,
          onExpansionChanged: (value) {
            setState(() => _isExpanded = value);
          },
        ),
        TextField(
          onChanged: (text) => setState(() => _inputText = text),
          decoration: const InputDecoration(hintText: '输入内容'),
        ),
      ],
    );
  }
}

方案二：将抽屉状态提升到父组件

把抽屉里需要保留的状态（比如折叠状态、输入文本）移到Scaffold所在的父组件中，抽屉内的组件改成无状态组件，通过参数接收状态和回调。这种方式更符合Flutter状态管理的最佳实践。

代码示例：

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

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // 保存抽屉需要的状态
  bool _drawerExpanded = false;
  String _drawerInputText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: MyWidget(
          isExpanded: _drawerExpanded,
          inputText: _drawerInputText,
          onExpansionChanged: (value) {
            setState(() => _drawerExpanded = value);
          },
          onInputChanged: (text) {
            setState(() => _drawerInputText = text);
          },
        ),
      ),
      body: ...
    );
  }
}

// 抽屉内的无状态组件
class MyWidget extends StatelessWidget {
  final bool isExpanded;
  final String inputText;
  final ValueChanged<bool> onExpansionChanged;
  final ValueChanged<String> onInputChanged;

  const MyWidget({
    super.key,
    required this.isExpanded,
    required this.inputText,
    required this.onExpansionChanged,
    required this.onInputChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ExpansionTile(
          title: const Text('折叠面板'),
          expanded: isExpanded,
          onExpansionChanged: onExpansionChanged,
        ),
        TextField(
          controller: TextEditingController(text: inputText),
          onChanged: onInputChanged,
          decoration: const InputDecoration(hintText: '输入内容'),
        ),
      ],
    );
  }
}

方案选择 #

• 方案一适合状态仅在抽屉内部使用、不需要和外部交互的场景，实现简单。
• 方案二更适合需要父组件和抽屉状态交互的场景，符合Flutter“状态提升”的设计思路，代码可维护性更强。

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