Flutter子组件修改传入的props时意外变更父组件变量如何解决

出现该问题的核心是你传入子组件的variable属于引用类型变量（自定义类实例、List、Map等均属于该类型），Flutter中引用类型的参数传递的是内存地址指针，父子组件实际持有的是同一个内存实例，因此子组件修改实例属性时，父组件的对应变量也会同步更新。

要实现子组件修改不影响父组件原变量，只需在子组件内创建父组件传入参数的深拷贝副本，所有修改操作仅针对副本执行即可，具体实现步骤如下：

实现步骤 #

• 在子组件的State中声明一个独立的局部变量，用于存储参数的深拷贝结果，禁止直接修改widget.variable
• 在子组件initState生命周期中，将父组件传入的参数深拷贝后赋值给上述局部变量，完成和原实例的解绑
• 子组件后续所有的属性修改、渲染逻辑都使用该局部变量，不操作widget上挂载的原参数

代码示例 #

1. 自定义类增加深拷贝方法 #

如果传递的是你自己封装的类，需要先给类实现copyWith深拷贝方法：

class Variable {
  String name;
  Variable({required this.name});

  // 自定义深拷贝方法，支持传入新属性覆盖原属性
  Variable copyWith({
    String? name,
  }) {
    return Variable(
      name: name ?? this.name,
    );
  }
}

2. 子组件内使用局部变量操作 #

class ChildWidget extends StatefulWidget {
  final Variable variable;
  const ChildWidget({super.key, required this.variable});

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  // 子组件内部独立持有的变量副本
  late Variable localVariable;

  @override
  void initState() {
    super.initState();
    // 初始化时拷贝父组件传入的参数，和原实例解绑
    localVariable = widget.variable.copyWith();
  }

  void modifyName() {
    // 仅修改局部副本，不会影响父组件的原变量
    setState(() {
      localVariable.name = 'all';
    });
  }

  @override
  Widget build(BuildContext context) {
    // 渲染时使用局部副本，不直接使用widget.variable
    return Text(localVariable.name);
  }
}

特殊类型处理 #

如果传递的是List、Map等内置集合类型，直接调用系统方法创建新实例即可：

// List 深拷贝
List localList = List.from(widget.parentList);
// Map 深拷贝
Map localMap = Map.from(widget.parentMap);

注意：如果是嵌套的集合/对象，需要逐层做深拷贝，仅拷贝第一层仍然会出现深层属性修改同步的问题。

内容的提问来源于stack exchange，提问作者Mr. ZeroOne