Flutter中修改第二页面对象致第一页面值同步变更的问题

问题根源 #

这是Dart的引用类型传递特性导致的：你传递给第二页面的TemplateModel对象是引用，而非独立副本。两个页面操作的是内存中的同一个实例，所以第二页面修改属性时，第一页面的对象会同步变化。

解决方案：传递对象的深拷贝实例 #

要阻止这种同步，你需要给TemplateModel及其嵌套对象实现深拷贝，确保第二页面拿到的是独立的新实例。

步骤1：给嵌套对象实现拷贝方法 #

假设templateModel.emoji中的元素是Emoji类，先给它添加copyWith方法实现深拷贝：

class Emoji {
  String titleTwo;
  // 其他属性...

  Emoji({required this.titleTwo});

  // 深拷贝方法，返回新的Emoji实例
  Emoji copyWith({String? titleTwo}) {
    return Emoji(
      titleTwo: titleTwo ?? this.titleTwo,
      // 其他属性按同样方式处理，确保每个属性都复制新值
    );
  }
}

步骤2：给TemplateModel实现深拷贝方法 #

接着给TemplateModel添加copyWith方法，注意要对列表里的每个Emoji都执行拷贝：

class TemplateModel {
  List<Emoji> emoji;
  // 其他属性...

  TemplateModel({required this.emoji});

  // 深拷贝方法，返回新的TemplateModel实例
  TemplateModel copyWith({List<Emoji>? emoji}) {
    return TemplateModel(
      emoji: emoji ?? this.emoji.map((emojiItem) => emojiItem.copyWith()).toList(),
      // 其他属性按同样方式处理
    );
  }
}

步骤3：跳转时传递拷贝后的实例 #

修改第一页面的跳转代码，传递copyWith()生成的新实例：

Navigator.push(context, MaterialPageRoute(builder: (context) =>
  EditEmojiTextTemplateScreen(templateModel: widget.templateModel.copyWith(),));

替代方案：用JSON序列化实现深拷贝（适合复杂对象） #

如果你的TemplateModel嵌套层级多，手动写copyWith太繁琐，可以用JSON序列化快速实现深拷贝：

// 先确保TemplateModel和Emoji支持JSON序列化（可通过json_serializable库生成）
TemplateModel copyTemplate(TemplateModel original) {
  final json = jsonEncode(original);
  return TemplateModel.fromJson(jsonDecode(json));
}

// 跳转时使用
Navigator.push(context, MaterialPageRoute(builder: (context) =>
  EditEmojiTextTemplateScreen(templateModel: copyTemplate(widget.templateModel),));

注意：这种方式性能略低于手动实现copyWith，适合快速开发场景。

验证效果 #

完成上述修改后，第二页面修改widget.templateModel的属性时，只会影响当前页面的副本，第一页面的原对象不会再同步变化。

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