Flutter中导航返回或函数执行完成时如何清空列表数据

旧计算结果残留的核心原因有两点：

• 存储配料数据的newList没有在每次重新计算前清空，multiply()/divide()方法执行时会把新计算结果直接追加到旧数据之后
• 跳转Result页时直接传递了原列表的引用，列表状态和上层页面绑定，上层数据未清空时，Result页会直接读取到旧内容

1 基础修复：计算前清空旧列表 #

在点击Calculate按钮触发计算逻辑前，先调用clear()方法清空newList的残留数据，再执行乘除计算逻辑，修改后的按钮代码如下：

ElevatedButton(onPressed: (){
  // 执行计算前清空上一次留存的旧数据
  newList.clear();
  if (index == 1){
    multiply();
    Navigator.of(context).pop();
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => result(newList)));
  }else {
    divide();
    Navigator.of(context).pop();
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => result(newList)));
  };
}, child: Text('Calculate'.toUpperCase(),style: TextStyle(fontWeight: FontWeight.bold),),
  style: ElevatedButton.styleFrom(
      primary: Colors.green),
),

2 稳妥优化：切断引用关联+返回时清空 #

如果需要避免列表引用带来的状态联动问题，同时希望用户从Result页返回时自动清空数据，可以做两点优化：

• 跳转Result页时传递列表的拷贝而非原列表引用，避免外部状态修改影响已经展示的结果页
• 给路由跳转加then回调，监听Result页的返回时机，页面返回时自动清空列表
  修改后的代码如下：

ElevatedButton(onPressed: (){
  newList.clear();
  if (index == 1){
    multiply();
    Navigator.of(context).pop();
    Navigator.of(context).push(
        // 传递列表副本，切断和原列表的引用关联
        MaterialPageRoute(builder: (context) => result(List.from(newList)))
    ).then((_) {
      // 从结果页返回时清空列表，避免下次进入残留数据
      newList.clear();
    });
  }else {
    divide();
    Navigator.of(context).pop();
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => result(List.from(newList)))
    ).then((_) {
      newList.clear();
    });
  };
}, child: Text('Calculate'.toUpperCase(),style: TextStyle(fontWeight: FontWeight.bold),),
  style: ElevatedButton.styleFrom(
      primary: Colors.green),
),

你的Result页代码中ListView.builder的itemBuilder参数里把context拼写成了contetx，属于笔误，虽然不会阻断运行，但建议修正为正确拼写，避免后续出现上下文调用相关的问题。

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