Flutter Bloc状态未重建求助：捕获实时更新但UI不刷新

核心问题根源 #

ChatLoaded状态中的compiledChats是List类型，Equatable默认对比引用地址而非列表内容。即使列表内的聊天数据更新，只要是同一个List实例，Equatable会判定状态未发生变化，导致Bloc不会触发UI重建。

具体修复步骤 #

1. 确保Chat模型继承Equatable #

如果Chat类没有继承Equatable，Equatable无法识别单个Chat对象的内容变更，即使列表引用变化，也可能出现状态对比不准确的情况：

class Chat extends Equatable {
  final String id;
  final String message;
  final DateTime timestamp;

  const Chat({
    required this.id,
    required this.message,
    required this.timestamp,
  });

  @override
  List<Object?> get props => [id, message, timestamp];
}

2. 创建全新List实例更新状态 #

在_onUpdateChat方法中，必须生成全新的List实例，确保状态的props引用发生变化：

void _onUpdateChat(
  UpdateChat event,
  Emitter<ChatState> emit,
) {
  // 通过expand+whereType生成新列表，替代嵌套循环，同时保证引用全新
  final List<Chat> compiledChats = event.chats
      .expand((chatList) => chatList)
      .whereType<Chat>()
      .toList();
  
  emit(ChatLoaded(compiledChats: compiledChats));
}

同时修改ChatLoaded的属性类型为非空List，减少空安全处理成本：

class ChatLoaded extends ChatState {
  final List<Chat> compiledChats;

  const ChatLoaded({required this.compiledChats});

  @override
  List<Object?> get props => [compiledChats];
}

3. 修复Bloc的资源清理逻辑 #

当前close方法未取消_chatListener，可能导致内存泄漏，同时避免重复订阅：

@override
Future<void> close() async {
  await _chatListener.cancel();
  await super.close();
}

void _onLoadChat(
  LoadChat event,
  Emitter<ChatState> emit,
) {
  // 先取消已有订阅，防止重复监听Firestore流
  _chatListener.cancel();
  _chatListener = _firestoreRepository.chats.listen((chats) {
    add(UpdateChat(chats: chats));
  });
}

4. 检查UI层的Bloc监听方式 #

确保UI使用BlocBuilder或BlocConsumer正确监听状态变化，不要用BlocListener构建UI（它仅用于执行副作用）：

BlocBuilder<ChatBloc, ChatState>(
  builder: (context, state) {
    if (state is ChatLoaded) {
      return ListView.builder(
        itemCount: state.compiledChats.length,
        itemBuilder: (context, index) {
          final chat = state.compiledChats[index];
          return ListTile(
            title: Text(chat.message),
            subtitle: Text(chat.timestamp.toString()),
          );
        },
      );
    }
    return const Center(child: CircularProgressIndicator());
  },
)

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