Flutter多页面数据留存问题：如何避免编辑页数据被覆盖

你当前的问题根源在于：每次从Page2/Page3返回时，都是重新创建新的Page1实例，只传入当前页面选中的字段（比如PID），但未携带之前已选中的其他字段值，导致旧数据被覆盖。

推荐使用Flutter原生的Navigator.pop回传数据的方式，无需重建Page1，直接在原页面状态中更新对应字段，完美保留已选数据。以下是具体实现：

步骤1：改造Page1，维护本地表单状态并接收返回数据 #

class Page1 extends Stateful Widget {
  // 可选：若需从外部带入初始数据，保留构造参数
  final String? initialPID;
  final String? initialName;
  
  Page1({Key? key, this.initialPID, this.initialName}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  // 维护本地表单状态，保存所有字段的当前值
  String? _currentPID;
  String? _currentName;

  @override
  void initState() {
    super.initState();
    // 初始化初始值（若存在）
    _currentPID = widget.initialPID;
    _currentName = widget.initialName;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('帖子编辑页')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 展示当前选中的字段值
            Text('当前车型ID：${_currentPID ?? '未选择'}'),
            Text('当前品牌：${_currentName ?? '未选择'}'),
            const SizedBox(height: 20),
            
            // 跳转Page2选择车型
            ElevatedButton(
              onPressed: () async {
                // 等待Page2返回的数据
                final selectedPID = await Navigator.push<String>(
                  context,
                  MaterialPageRoute(builder: (context) => Page2()),
                );
                // 仅更新PID字段，不影响其他已选数据
                if (selectedPID != null) {
                  setState(() {
                    _currentPID = selectedPID;
                  });
                }
              },
              child: const Text('选择车型'),
            ),
            
            // 跳转Page3选择品牌
            ElevatedButton(
              onPressed: () async {
                // 等待Page3返回的数据
                final selectedName = await Navigator.push<String>(
                  context,
                  MaterialPageRoute(builder: (context) => Page3()),
                );
                // 仅更新name字段
                if (selectedName != null) {
                  setState(() {
                    _currentName = selectedName;
                  });
                }
              },
              child: const Text('选择品牌'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤2：改造Page2/Page3，用Navigator.pop返回选中数据 #

以Page2为例，修改ListTile的点击逻辑：

ListTile(
  title: Text(snapshot.data[index]['PID']),
  onTap: () {
    // 直接返回选中的PID，关闭当前页面
    Navigator.pop(context, snapshot.data[index]['PID']);
  },
)

Page3的ListTile同理：

ListTile(
  title: Text(snapshot.data[index]['name']),
  onTap: () {
    Navigator.pop(context, snapshot.data[index]['name']);
  },
)

方案优势 #

• 原Page1的状态会被Flutter保留，不会销毁，已选数据自然不会丢失
• 仅更新对应字段，无需传递所有参数，代码简洁易维护，适配7个以上页面的场景
• 完全基于Flutter原生导航机制，无需引入额外依赖

备选方案：全局状态管理（复杂场景适用） #

如果表单字段极多，或需要在更多页面共享数据，可使用Provider、GetX等状态管理工具，将表单数据存入全局状态，子页面直接更新对应字段，Page1监听状态变化自动刷新UI。该方案适合大型项目，简单表单场景下原生方案足够轻量高效。

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