求助：聊天应用语音消息组件中BLoC与just_audio的结合问题

问题根源 #

1. 现有BLoC仅记录单个消息ID，无法全局追踪所有音频的播放状态，导致无法实现音频互斥播放。
2. buildWhen逻辑仅匹配事件ID，未考虑全局播放状态变化对当前组件的影响，引发不必要的重复重建。

调整方案 #

1. 重构BLoC状态结构

将状态从单一ID改为全局播放状态管理，同时记录每个音频的播放状态：

// 定义音频播放状态枚举
enum AudioPlayerStatus { playing, paused, stopped }

class ChatMsgState {
  // 当前正在播放的音频ID（null表示无音频播放）
  final String? playingAudioId;
  // 存储每个音频ID对应的播放状态
  final Map<String, AudioPlayerStatus> audioStatusMap;
  // 存储所有音频播放器实例
  final Map<String, AudioPlayer> audioPlayers;

  const ChatMsgState({
    this.playingAudioId,
    this.audioStatusMap = const {},
    this.audioPlayers = const {},
  });

  ChatMsgState copyWith({
    String? playingAudioId,
    Map<String, AudioPlayerStatus>? audioStatusMap,
    Map<String, AudioPlayer>? audioPlayers,
  }) {
    return ChatMsgState(
      playingAudioId: playingAudioId ?? this.playingAudioId,
      audioStatusMap: audioStatusMap ?? this.audioStatusMap,
      audioPlayers: audioPlayers ?? this.audioPlayers,
    );
  }
}

2. 优化BLoC事件处理逻辑

在事件处理器中实现音频互斥逻辑，确保同一时间仅一个音频播放：

class ChatMsgBloc extends Bloc<ChatMsgEvent, ChatMsgState> {
  ChatMsgBloc() : super(const ChatMsgState()) {
    on<AudioMsgToggleEvent>(_onAudioToggle);
    on<AudioMsgStopEvent>(_onAudioStop);
  }

  Future<void> _onAudioToggle(AudioMsgToggleEvent event, Emitter<ChatMsgState> emit) async {
    final currentPlayingId = state.playingAudioId;
    final targetId = event.id;

    // 1. 获取或初始化目标音频播放器
    final targetPlayer = state.audioPlayers[targetId] ?? AudioPlayer();
    final updatedPlayers = Map<String, AudioPlayer>.from(state.audioPlayers)..[targetId] = targetPlayer;

    // 2. 处理互斥逻辑：如果当前有其他音频在播放，先停止它
    if (currentPlayingId != null && currentPlayingId != targetId) {
      final playingPlayer = state.audioPlayers[currentPlayingId];
      await playingPlayer?.pause();
      // 更新已停止音频的状态
      final updatedStatus = Map<String, AudioPlayerStatus>.from(state.audioStatusMap)
        ..[currentPlayingId] = AudioPlayerStatus.paused;
      emit(state.copyWith(
        playingAudioId: null,
        audioStatusMap: updatedStatus,
      ));
    }

    // 3. 切换目标音频的播放状态
    final currentStatus = state.audioStatusMap[targetId] ?? AudioPlayerStatus.stopped;
    AudioPlayerStatus newStatus;

    if (currentStatus == AudioPlayerStatus.playing) {
      await targetPlayer.pause();
      newStatus = AudioPlayerStatus.paused;
      emit(state.copyWith(
        playingAudioId: null,
        audioStatusMap: Map.from(state.audioStatusMap)..[targetId] = newStatus,
        audioPlayers: updatedPlayers,
      ));
    } else {
      await targetPlayer.play(UrlSource(event.audioUrl)); // 替换为你的音频源
      newStatus = AudioPlayerStatus.playing;
      emit(state.copyWith(
        playingAudioId: targetId,
        audioStatusMap: Map.from(state.audioStatusMap)..[targetId] = newStatus,
        audioPlayers: updatedPlayers,
      ));
    }
  }

  // 停止指定音频的辅助方法
  Future<void> _onAudioStop(AudioMsgStopEvent event, Emitter<ChatMsgState> emit) async {
    final player = state.audioPlayers[event.id];
    await player?.pause();
    emit(state.copyWith(
      playingAudioId: state.playingAudioId == event.id ? null : state.playingAudioId,
      audioStatusMap: Map.from(state.audioStatusMap)..[event.id] = AudioPlayerStatus.paused,
    ));
  }

  // 销毁时释放所有播放器资源
  @override
  Future<void> close() {
    for (final player in state.audioPlayers.values) {
      player.dispose();
    }
    return super.close();
  }
}

// 定义事件
abstract class ChatMsgEvent {}
class AudioMsgToggleEvent extends ChatMsgEvent {
  final String id;
  final String audioUrl; // 音频地址，根据你的需求调整
  AudioMsgToggleEvent({required this.id, required this.audioUrl});
}
class AudioMsgStopEvent extends ChatMsgEvent {
  final String id;
  AudioMsgStopEvent({required this.id});
}

3. 调整组件的BlocBuilder逻辑

修改buildWhen，确保组件仅在自身音频状态变化时重建：

BlocBuilder<ChatMsgBloc, ChatMsgState>(
  buildWhen: (previous, current) {
    // 仅当自身音频状态变化，或全局播放ID涉及自身时重建
    return current.audioStatusMap[widget.id] != previous.audioStatusMap[widget.id] ||
           current.playingAudioId == widget.id ||
           (previous.playingAudioId == widget.id && current.playingAudioId != widget.id);
  },
  builder: (context, state) {
    final status = state.audioStatusMap[widget.id] ?? AudioPlayerStatus.stopped;
    final isPlaying = state.playingAudioId == widget.id;

    return IconButton(
      icon: Icon(isPlaying ? Icons.pause_circle : Icons.play_circle),
      onPressed: () {
        context.read<ChatMsgBloc>().add(
          AudioMsgToggleEvent(id: widget.id, audioUrl: widget.audioUrl),
        );
      },
    );
  },
)

4. 关键注意点

• 所有音频播放器实例由BLoC统一管理，组件不直接持有播放器，避免内存泄漏和状态不一致。
• 事件触发时先处理互斥逻辑，确保新音频播放前停止其他正在播放的音频。
• 通过buildWhen精准过滤状态变化，避免不必要的组件重建。

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