Flutter页面间列表同步问题：阻止返回时自动更新原列表

问题场景 #

在Screen A中持有一个列表，通过Navigator.push将该列表传递至Screen B后，在Screen B内修改了列表元素的部分字段。返回Screen A后，发现原列表也被自动更新。需要实现：仅当手动更新Screen A的列表时，它才会发生改变，返回时不自动更新。

相关实体类定义 #

class PayeeList {
  List<PayeeData>? data;
}


class PayeeData {
  int? id;
  PayeeAttributes? attributes;
}


class PayeeAttributes {
  num? amount;
  String? createdAt;
  String? updatedAt;
  User? user;
}

初始列表及页面跳转代码 #

List<PayeeData>? data = [];

List<PayeeData> payees=  data.toList();
var result = await Navigator.push(context,
    MaterialPageRoute(builder: (context) => MultiBlocProvider(
         providers: [
              // 为在Stack Overflow分享已移除
         ],
         child: ExpensePayeesScreen(
             title: "Payees",
             isEdit: false,
             paidAmounts:payees,
              totalAmount: 100))),
          );

从Screen B返回后，data列表会被自动更新。

解决办法 #

问题根源在于data.toList()只是浅拷贝，列表中的PayeeData对象仍与原列表共享引用，修改Screen B中的对象属性会直接影响原列表。通过创建列表的深拷贝（临时数组）传递，即可让Screen B操作独立的对象集合，不会影响原列表。

实现代码如下：

List<PayeeData> temp = [];
expenseData.attributes?.payees?.data?.forEach((element) {
      PayeeAttributes payeeAttributes = PayeeAttributes(amount: element.attributes?.amount ?? 0, user: element.attributes?.user ?? User());
      temp.add(PayeeData(id: element.id, attributes: payeeAttributes));
});

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