Flutter Bloc移除Set元素后UI不重建问题求助

问题核心 #

向状态中的Set<String>添加元素时UI会重建，但移除元素时无响应。本质原因是始终修改同一个Set实例，未创建新的不可变副本，导致Equatable无法识别状态变化，进而不触发UI重建。

具体分析 #

1. copyWith方法直接复用原状态的subscriptions引用，未生成新Set；
2. 用state.subscriptions..add(event.key)或state.subscriptions..remove(event.key)操作时，都是修改原Set实例，而非生成新集合；
3. Bloc依赖状态不可变性判断是否更新UI：连续修改同一个Set实例时，前一个状态的subscriptions已被修改，新状态与旧状态的内容对比无差异，Equatable判定状态未变化，因此不触发UI重建。

修复方案 #

确保每次状态更新时生成新的Set实例，维持状态不可变性：

1. 优化状态类的copyWith方法（可选，增强严谨性）

GlobalLoadingState copyWith({Set<String>? subscriptions}) {
  return GlobalLoadingState(
    subscriptions: subscriptions != null ? Set.from(subscriptions) : Set.from(this.subscriptions),
  );
}

2. 修改Bloc中的状态更新逻辑

替换直接修改原Set的代码，创建新Set实例：

on<AddOrder>((event, emit) async {
  // 添加元素：生成包含原元素+新元素的新Set
  final newSubscriptions = Set.from(state.subscriptions)..add(event.key);
  emit(state.copyWith(subscriptions: newSubscriptions));
  
  try {
    await Future.delayed(const Duration(milliseconds: 2000));
    // 移除元素：生成移除目标元素后的新Set
    final updatedSubscriptions = Set.from(state.subscriptions)..remove(event.key);
    emit(state.copyWith(subscriptions: updatedSubscriptions));
    
    event.onSuccess();
  } catch (error) {
    final updatedSubscriptions = Set.from(state.subscriptions)..remove(event.key);
    emit(state.copyWith(subscriptions: updatedSubscriptions));
  }
});

也可使用更简洁的扩展操作符写法：

// 添加元素
emit(state.copyWith(subscriptions: {...state.subscriptions, event.key}));

// 移除元素
emit(state.copyWith(subscriptions: state.subscriptions.where((e) => e != event.key).toSet()));

补充说明 #

第一次添加元素时UI能刷新，是因为初始状态的subscriptions是空Set，修改后内容变化，Equatable判定状态不同；但移除元素时，修改的是已emit过的同一个Set实例，前一个状态的subscriptions已被修改，导致新状态与旧状态内容无差异，因此不触发重建。

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