如何创建可复用且监听指定ChangeNotifier的Flutter组件

你的场景是拥有三个ChangeNotifier（NotifierA、NotifierB、NotifierC），每个都包含likeCount字段，想要复用显示点赞数的MyLikeWidget，但现有分支判断写法会产生大量样板代码，使用Selector3又会导致组件在任意Notifier的点赞数变化时强制重建，影响复杂组件（比如播放中的视频组件）的性能。

下面提供几种无需冗余代码且能精准监听的解决方案：

方案1：抽象类约束+泛型Selector #

先通过抽象类统一所有需要监听点赞数的ChangeNotifier的接口，再用泛型实现通用监听组件：

// 定义抽象类，约束所有带点赞数的Notifier
abstract class LikeCountNotifier extends ChangeNotifier {
  int get likeCount;
}

// 让你的三个Notifier实现该抽象类
class NotifierA extends LikeCountNotifier {
  int _likeCount = 0;
  
  @override
  int get likeCount => _likeCount;

  void updateLikeCount(int newCount) {
    _likeCount = newCount;
    notifyListeners();
  }
}

class NotifierB extends LikeCountNotifier {
  // 同样实现likeCount字段和更新逻辑
}

class NotifierC extends LikeCountNotifier {
  // 同样实现likeCount字段和更新逻辑
}

然后编写通用复用组件：

class ReusableLikeWidget<T extends LikeCountNotifier> extends StatelessWidget {
  const ReusableLikeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Selector<T, int>(
      selector: (context, notifier) => notifier.likeCount,
      builder: (context, likeCount, child) {
        return MyLikeWidget(likeCount: likeCount);
      },
    );
  }
}

// 使用示例
ReusableLikeWidget<NotifierA>(),
ReusableLikeWidget<NotifierB>(),

优势：

• 彻底消除分支判断的样板代码
• 每个组件实例仅监听对应泛型的Notifier，只有目标likeCount变化时才会重建MyLikeWidget
• 扩展性强，新增同类Notifier只需实现抽象类，无需修改复用组件

方案2：传递选择器函数实现灵活复用 #

如果不想约束Notifier的继承关系，可直接将Selector的选择器函数作为参数传入复用组件：

class ReusableLikeWidget<T extends ChangeNotifier> extends StatelessWidget {
  const ReusableLikeWidget({
    Key? key,
    required this.likeSelector,
  }) : super(key: key);

  // 接收从指定Notifier中提取点赞数的函数
  final int Function(BuildContext, T) likeSelector;

  @override
  Widget build(BuildContext context) {
    return Selector<T, int>(
      selector: likeSelector,
      builder: (context, likeCount, child) {
        return MyLikeWidget(likeCount: likeCount);
      },
    );
  }
}

// 使用示例
ReusableLikeWidget<NotifierA>(
  likeSelector: (context, notifier) => notifier.likeCount,
),
ReusableLikeWidget<NotifierB>(
  likeSelector: (context, notifier) => notifier.likeCount,
),

优势：

• 无需修改现有Notifier的继承结构，适配性更强
• 依然保证仅监听指定Notifier的目标字段，避免不必要的组件重建

方案3：通用监听组件封装 #

如果项目中有大量类似的监听复用需求，可以封装一个更通用的组件：

class TargetedListener<T extends ChangeNotifier, V> extends StatelessWidget {
  const TargetedListener({
    Key? key,
    required this.selector,
    required this.builder,
  }) : super(key: key);

  // 从Notifier中提取目标值的选择器
  final V Function(BuildContext, T) selector;
  // 根据目标值构建UI的函数
  final Widget Function(BuildContext, V) builder;

  @override
  Widget build(BuildContext context) {
    return Selector<T, V>(
      selector: selector,
      builder: (context, value, child) => builder(context, value),
    );
  }
}

// 使用示例
TargetedListener<NotifierA, int>(
  selector: (context, notifier) => notifier.likeCount,
  builder: (context, count) => MyLikeWidget(likeCount: count),
),

优势：

• 完全解耦监听逻辑与UI构建，适用于所有需要监听ChangeNotifier特定字段的场景
• 代码复用性拉满，新增场景只需传入对应的选择器和构建函数

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