Bloc搭配Freezed开发时触发事件后Bottom Sheet反复弹出如何解决？

问题根因 #

你在HomePage中使用的BlocConsumer的listener没有添加状态变化过滤，只要NoteState发生更新，就会执行判断逻辑。当你点击单选按钮时，Bloc会生成新的NoteState实例，此时isAddNewNoteButtonClickedState的值仍然为true，会再次触发弹出Bottom Sheet的逻辑，就会出现重复弹出的问题。

解决方法 #

给BlocConsumer添加listenWhen参数，只在isAddNewNoteButtonClickedState从false变为true的时候才触发弹出逻辑，修改后的HomePage中BlocConsumer代码如下：

return BlocConsumer<NoteBloc, NoteState>(
  // 新增listenWhen过滤监听触发条件
  listenWhen: (previousState, currentState) {
    // 只有isAddNewNoteButtonClickedState从false切换为true时才触发listener
    return previousState.isAddNewNoteButtonClickedState == false 
        && currentState.isAddNewNoteButtonClickedState == true;
  },
  listener: (context, state) {
    // 原有弹出Bottom Sheet的逻辑保持不变
    _scaffoldKey.currentState!
        .showBottomSheet((context) => const AddNewNoteBottomSheet())
        .closed
        .then(
      (value) {
        context.read<NoteBloc>().add(
              const NoteEvent.addNewNoteButtonEvent(
                isClickedEvent: false,
              ),
            );
      },
    );
  },
  // 原有builder逻辑保持不变
  builder: (context, state) {
    // ... 原有代码
  },
);

修改后只有点击悬浮按钮触发状态切换的时候才会弹出Bottom Sheet，点击单选框、输入文本触发的状态更新不会触发弹出逻辑，问题即可解决。

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