Flutter Provider：列表中自定义类修改后如何通知监听器？

我在Provider中维护了一个CustomClass类型的列表，CustomClass包含两个bool属性及对应的切换方法：

List<CustomClass> MyList = [
CustomClass(bool1: false, bool2: false),
CustomClass(bool1: false, bool2: false),
CustomClass(bool1: false, bool2: false),
CustomClass(bool1: false, bool2: false),
CustomClass(bool1: false, bool2: false),
];

自定义类代码如下：

class CustomClass {
bool bool1;
bool bool2;

void Bool1Toggle(){
bool1 = !bool1;
}
void Bool2Toggle(){
bool2 = !bool2;
}

CustomClass ({required this.bool1, required this.bool2});
}

点击按钮时，我调用以下代码修改列表元素的bool值：

context.read<Provider>().MyList[0].Bool1Toggle();

按钮颜色通过以下代码绑定状态：

context.watch<Provider>().MyList[0].bool1 ? kwhite : kblack,

问题：bool值已成功修改，但按钮颜色未更新。猜测和Provider的notifyListeners()有关，但不知道如何在CustomClass的方法中触发监听器通知。

核心原因：Provider只会在自身状态被替换或者显式调用notifyListeners()时通知组件更新。修改列表元素的内部属性时，Provider无法感知变化，因此不会触发UI更新。

方式一：在Provider中封装修改逻辑（推荐） #

将修改CustomClass属性的逻辑移到Provider内部，每次修改后调用notifyListeners()触发更新：

1. 修改Provider类，添加切换方法：

class MyProvider extends ChangeNotifier {
  List<CustomClass> myList = [
    CustomClass(bool1: false, bool2: false),
    CustomClass(bool1: false, bool2: false),
    CustomClass(bool1: false, bool2: false),
    CustomClass(bool1: false, bool2: false),
    CustomClass(bool1: false, bool2: false),
  ];

  // 切换指定索引元素的bool1
  void toggleBool1(int index) {
    myList[index].Bool1Toggle();
    notifyListeners(); // 触发UI更新
  }

  // 切换指定索引元素的bool2
  void toggleBool2(int index) {
    myList[index].Bool2Toggle();
    notifyListeners();
  }
}

2. 按钮点击时调用Provider的方法：

context.read<MyProvider>().toggleBool1(0);

这种方式符合Provider的状态管理规范，将状态修改的逻辑集中在Provider中，降低耦合，便于维护。

方式二：让CustomClass持有Provider引用（不推荐） #

如果必须在CustomClass的方法中触发通知，可以让类持有ChangeNotifier的引用，但会增加代码耦合：

1. 修改CustomClass，添加ChangeNotifier参数：

class CustomClass {
  bool bool1;
  bool bool2;
  final ChangeNotifier? notifier;

  void Bool1Toggle(){
    bool1 = !bool1;
    notifier?.notifyListeners(); // 触发更新
  }
  void Bool2Toggle(){
    bool2 = !bool2;
    notifier?.notifyListeners();
  }

  CustomClass ({required this.bool1, required this.bool2, this.notifier});
}

2. 初始化列表时传入Provider自身引用：

class MyProvider extends ChangeNotifier {
  List<CustomClass> myList = [
    CustomClass(bool1: false, bool2: false, notifier: this),
    CustomClass(bool1: false, bool2: false, notifier: this),
    CustomClass(bool1: false, bool2: false, notifier: this),
    CustomClass(bool1: false, bool2: false, notifier: this),
    CustomClass(bool1: false, bool2: false, notifier: this),
  ];
}

这种方式能解决问题，但会让CustomClass依赖Provider，不利于代码扩展和维护，优先选择第一种方案。

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