如何防止modal关闭时被dispose，实现再次打开时widget状态一致？

方法1：将状态提升到父Widget（最推荐） #

把Modal里需要保留的状态（比如输入框内容、开关状态等）移到弹出Modal的父Widget的State中，Modal仅作为状态的展示和交互载体。这样不管Modal是否被dispose，状态都由父Widget持有，下次打开时直接复用这些状态。

示例代码：

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  // 保存Modal需要的状态
  String _inputText = '';
  bool _toggleSwitch = false;

  void _showModal() {
    showDialog(
      context: context,
      builder: (context) => MyModal(
        inputText: _inputText,
        toggleSwitch: _toggleSwitch,
        onInputChanged: (text) => setState(() => _inputText = text),
        onToggleChanged: (value) => setState(() => _toggleSwitch = value),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: _showModal,
          child: Text('打开Modal'),
        ),
      ),
    );
  }
}

class MyModal extends StatelessWidget {
  final String inputText;
  final bool toggleSwitch;
  final Function(String) onInputChanged;
  final Function(bool) onToggleChanged;

  const MyModal({
    required this.inputText,
    required this.toggleSwitch,
    required this.onInputChanged,
    required this.onToggleChanged,
  });

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(
            controller: TextEditingController(text: inputText),
            onChanged: onInputChanged,
            decoration: InputDecoration(hintText: '输入内容'),
          ),
          SwitchListTile(
            value: toggleSwitch,
            onChanged: onToggleChanged,
            title: Text('保持开关状态'),
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('关闭'),
        ),
      ],
    );
  }
}

方法2：用Stack+Offstage替代系统Dialog（完全避免Dispose） #

不使用showDialog，而是在页面的Stack中直接放置Modal组件，通过Offstage控件控制其显示/隐藏。这样Modal组件始终存在于Widget树中，不会被dispose，状态自然保留。

示例代码：

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  bool _isModalVisible = false;

  void _toggleModal() {
    setState(() => _isModalVisible = !_isModalVisible);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: _toggleModal,
              child: Text(_isModalVisible ? '关闭Modal' : '打开Modal'),
            ),
          ),
          // 自定义Modal，用Offstage控制显示
          Offstage(
            offstage: !_isModalVisible,
            child: GestureDetector(
              // 点击背景关闭Modal
              onTap: _toggleModal,
              child: Container(
                color: Colors.black54,
                child: Center(
                  child: GestureDetector(
                    onTap: () {}, // 阻止内部点击透传
                    child: Container(
                      width: 300,
                      padding: EdgeInsets.all(20),
                      color: Colors.white,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          TextField(decoration: InputDecoration(hintText: '输入内容')),
                          SizedBox(height: 20),
                          SwitchListTile(
                            value: true, // 状态会一直保留
                            onChanged: (v) {},
                            title: Text('开关状态'),
                          ),
                          SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: _toggleModal,
                            child: Text('关闭'),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方法3：缓存Dialog实例（需注意内存泄漏风险） #

提前创建Dialog的StatefulWidget实例并缓存，每次弹出时复用同一个实例。但要注意，若父Widget被dispose时需手动清理缓存的实例，避免内存泄漏。

示例代码：

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  MyModal? _cachedModal;

  void _showModal() {
    // 第一次创建后缓存实例
    _cachedModal ??= MyModal();
    showDialog(
      context: context,
      builder: (context) => _cachedModal!,
    );
  }

  @override
  void dispose() {
    // 父Widget销毁时清理缓存，避免内存泄漏
    _cachedModal = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: _showModal,
          child: Text('打开Modal'),
        ),
      ),
    );
  }
}

class MyModal extends StatefulWidget {
  @override
  _MyModalState createState() => _MyModalState();
}

class _MyModalState extends State<MyModal> {
  String _inputText = '';
  bool _toggleSwitch = false;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(
            onChanged: (text) => setState(() => _inputText = text),
            decoration: InputDecoration(hintText: '输入内容'),
            controller: TextEditingController(text: _inputText),
          ),
          SwitchListTile(
            value: _toggleSwitch,
            onChanged: (v) => setState(() => _toggleSwitch = v),
            title: Text('保持开关状态'),
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('关闭'),
        ),
      ],
    );
  }
}

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