Flutter结合BLoC与Socket.io开发遇三类问题求助

问题1：断开连接后“Disconnected”文本无法持久显示，立刻变为“Nothing” #

原因：BlocProvider<SocketBloc>被放在Scaffold的body内部，组件重建时会重新创建Bloc实例，导致状态被重置；同时Socket连接事件未正确触发状态更新。

修复步骤：

1. 将BlocProvider移到Scaffold外层，保证Bloc实例在页面生命周期内唯一：

// 修改 socket_screen.dart
class SocketScreen extends StatelessWidget {
  const SocketScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<SocketBloc>(
      create: (BuildContext context) => SocketBloc()..add(const SocketConnectEvent()),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.primary,
          title: const Text("Socket Test")
        ),
        body: BlocBuilder<SocketBloc, SocketState>(
          builder: (context, state) {
            // 保留原builder逻辑
          }
        )
      )
    );
  }
}

2. 修正Socket连接事件的触发逻辑，调用add方法发送事件：

// 修改 socket.bloc.dart 中的 onConnect 回调
// 原代码：_socket.onConnect((_) => const SocketConnectEvent());
_socket.onConnect((_) => add(const SocketConnectEvent()));

问题2：重连成功后无法回到“Connected”状态 #

原因：onReconnect回调仅创建了事件对象，但未调用add方法将事件传入Bloc，状态更新逻辑未触发。

修复步骤：

// 修改 socket.bloc.dart 中的 onReconnect 回调
// 原代码：_socket.onReconnect((data) => SocketReConnectEvent());
_socket.onReconnect((data) => add(const SocketReConnectEvent()));

问题3：终端能收到数据但屏幕无法展示 #

原因：收到playlist事件时，直接将原始JSON数据传入SocketOnReceiveEvent，但事件要求接收ActiveLayout类型，类型不匹配导致状态更新失败。

修复步骤：

1. 将原始数据解析为ActiveLayout对象后再发送事件：

// 修改 socket.bloc.dart 中的 playlist 事件回调
_socket.on('playlist', (data) {
  print("//////////////////// Received Data $data");
  // 用你的解析方法将data转为ActiveLayout实例
  final activeLayout = activeLayoutFromJson(data);
  add(SocketOnReceiveEvent(data: activeLayout));
});

2. 确保ActiveLayout及其内部类正确实现Equatable，避免Bloc误判状态未变化：

// 示例 active_layout.model.dart 实现
class ActiveLayout extends Equatable {
  final Playlist playlist;

  const ActiveLayout({required this.playlist});

  factory ActiveLayout.fromJson(Map<String, dynamic> json) => ActiveLayout(
        playlist: Playlist.fromJson(json['playlist']),
      );

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

class Playlist extends Equatable {
  final String name;

  const Playlist({required this.name});

  factory Playlist.fromJson(Map<String, dynamic> json) => Playlist(
        name: json['name'],
      );

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

额外调试建议：

• 在BlocBuilder中添加初始状态处理，避免初始显示“Nothing”：

if (state is SocketInitialState) {
  return const Center(child: Text("Connecting..."));
}

• 取消socket_screen.dart中SocketErrorState的注释，方便捕获错误：

if (state is SocketErrorState) {
  String message = state.error;
  return Center(child: Text(message));
}

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