Flutter Bloc触发排序事件后界面不重建问题求助

问题原因分析 #

你的代码中存在几个关键问题导致排序后界面不更新：

1. 多余的通用事件拦截器：Bloc中注册的on<ReferrerEvent>((event, emit) {})会拦截所有ReferrerEvent子类事件，虽当前是空实现，但可能干扰后续事件处理器的执行逻辑。
2. BlocProvider用法不规范：若referrerBloc是外部已创建的实例，使用create方法提供会导致上下文关联问题，BlocBuilder可能无法正确监听状态变化。
3. Builder方法存在副作用：在BlocBuilder的builder函数中直接调用referrerBloc.add(ReferrerLoadedEvent())属于副作用操作，会导致状态更新逻辑混乱，甚至可能覆盖排序后的状态。
4. ItemReferrer未正确实现Equatable：若ItemReferrer没有重写==和hashCode，Equatable无法正确判断列表内容的变化，Bloc会认为状态未更新，不触发界面重建。

解决方案 #

1. 移除通用事件处理器 #

删除Bloc中多余的on<ReferrerEvent>注册，确保子类事件处理器能正常执行：

class ReferrerBloc extends Bloc<ReferrerEvent, ReferrerState> {
  ReferrerBloc() : super(const ReferrerLoadingState()) {
    // 移除通用事件拦截器：on<ReferrerEvent>((event, emit) {});
    
    on<ReferrerLoadedEvent>((event, emit) {
      final listUser = [
        Item1,
        // ... 你的数据
      ];
      emit(ReferrerLoadedState(listReferrer: listUser));
    });
    
    on<ReferrerSortEvent>((event, emit) {
      print(event.flag);
      final listUser = [
        Item1, 
        // ... 你的数据
      ];
      final List<ItemReferrer> listResult = [];
      if (event.flag == 0) {
        listResult.addAll(listUser);
      } else if (event.flag == 1) {
        listResult.addAll(listUser.where((element) => element.flag == 1));
      }
      emit(ReferrerLoadedState(listReferrer: listResult));
    });
    
    // 初始加载事件移到Bloc构造函数内
    add(ReferrerLoadedEvent());
  }
}

2. 修正BlocProvider用法 #

如果referrerBloc是外部已创建的实例，使用BlocProvider.value替代create：

BlocProvider.value(
  value: referrerBloc,
  child: Column(
    // ... 原有组件
  ),
)

3. 移除Builder方法中的副作用 #

修改BlocBuilder的builder函数，去掉添加事件的逻辑：

BlocBuilder<ReferrerBloc, ReferrerState>(
  builder: (context, state) {
    if (state is ReferrerLoadingState) {
      return const Center(child: CircularProgressIndicator());
    } else if (state is ReferrerLoadedState) {
      final listReferrer = state.listReferrer;
      return Expanded(
        child: ListView.builder(
          itemCount: listReferrer.length,
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: itemUser(listReferrer[index]),
            );
          },
        ),
      );
    }
    return const Center(
      child: Text('Error!', style: TextStyle(color: Colors.red)),
    );
  },
)

4. 确保ItemReferrer实现Equatable #

让ItemReferrer继承Equatable，确保列表元素能正确比较：

class ItemReferrer extends Equatable {
  final int flag;
  // 其他字段，比如名称、时间等

  const ItemReferrer({required this.flag, /* 其他参数 */});

  @override
  List<Object> get props => [flag, /* 其他字段 */];
}

5. 修正按钮点击事件传递 #

确保flag1/2/3的点击事件传递的是回调函数：

flag1(() => referrerBloc.add(const ReferrerSortEvent(flag: 0, time: 0))),
flag2(() => referrerBloc.add(const ReferrerSortEvent(flag: 1, time: 0))),
flag3(() => referrerBloc.add(const ReferrerSortEvent(flag: 2, time: 0))),

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