如何让file_picker与bloc库符合BLoC模式规范

要实现UI无业务逻辑、Bloc无UI的目标，核心思路是用抽象服务层封装平台UI相关操作，让Bloc依赖抽象接口而非具体UI组件，同时UI只负责触发事件和响应状态变化。具体步骤如下：

1. 封装文件选择服务 #

创建抽象服务类定义文件选择的接口，再用实现类封装FilePicker的具体调用。这样Bloc只依赖抽象接口，不会直接耦合UI相关的包：

// 抽象服务：定义文件选择的契约
abstract class FilePickerService {
  Future<FilePickerResult?> pickAudioFile();
}

// 具体实现：封装FilePicker的平台调用
class FilePickerServiceImpl implements FilePickerService {
  @override
  Future<FilePickerResult?> pickAudioFile() {
    return FilePicker.platform.pickFiles(type: FileType.audio);
  }
}

2. 调整Bloc的事件与状态 #

新增一个触发文件选择的事件（而非直接传入Track），同时扩展状态来处理加载、错误等场景：

// 事件定义
sealed class TranscriberOverviewEvent {}

// 触发文件选择的事件
class TranscriberOverviewPickTrackRequested extends TranscriberOverviewEvent {}

// 添加Track的业务事件
class TranscriberOverviewTrackAdded extends TranscriberOverviewEvent {
  final Track track;
  TranscriberOverviewTrackAdded(this.track);
}

// 状态定义
sealed class TranscriberOverviewState {}

class TranscriberOverviewInitial extends TranscriberOverviewState {}

// 加载中状态（文件选择/读取时显示）
class TranscriberOverviewLoading extends TranscriberOverviewState {}

// 添加成功状态
class TranscriberOverviewTrackAddedSuccess extends TranscriberOverviewState {
  final Track track;
  TranscriberOverviewTrackAddedSuccess(this.track);
}

// 错误状态（文件选择失败时显示）
class TranscriberOverviewError extends TranscriberOverviewState {
  final String message;
  TranscriberOverviewError(this.message);
}

3. 实现Bloc的逻辑处理 #

让Bloc依赖FilePickerService，收到文件选择事件后调用服务完成操作，再处理文件读取、Track转换的逻辑：

class TranscriberOverviewBloc extends Bloc<TranscriberOverviewEvent, TranscriberOverviewState> {
  final FilePickerService filePickerService;

  TranscriberOverviewBloc({required this.filePickerService}) : super(TranscriberOverviewInitial()) {
    on<TranscriberOverviewPickTrackRequested>(_onPickTrackRequested);
    on<TranscriberOverviewTrackAdded>(_onTrackAdded);
  }

  Future<void> _onPickTrackRequested(
    TranscriberOverviewPickTrackRequested event,
    Emitter<TranscriberOverviewState> emit,
  ) async {
    emit(TranscriberOverviewLoading());
    try {
      final result = await filePickerService.pickAudioFile();
      if (result != null) {
        final file = File(result.files.single.path!);
        final name = result.files.single.name;
        final bytes = await file.readAsBytes();
        final track = Track(name: name, file: bytes);
        // 触发添加Track的业务事件
        add(TranscriberOverviewTrackAdded(track));
      } else {
        // 用户取消选择，回到初始状态
        emit(TranscriberOverviewInitial());
      }
    } catch (e) {
      emit(TranscriberOverviewError('文件处理失败: ${e.toString()}'));
      // 可选：自动恢复初始状态
      Future.delayed(const Duration(seconds: 3), () => emit(TranscriberOverviewInitial()));
    }
  }

  void _onTrackAdded(
    TranscriberOverviewTrackAdded event,
    Emitter<TranscriberOverviewState> emit,
  ) {
    // 这里处理添加Track的核心业务逻辑（比如存入列表、持久化等）
    emit(TranscriberOverviewTrackAddedSuccess(event.track));
    // 根据业务需求，可选择回到初始状态或保持成功状态
    emit(TranscriberOverviewInitial());
  }
}

4. 简化UI层代码 #

UI现在只需要触发事件，并通过BlocBuilder响应Bloc的状态变化，完全剥离业务逻辑：

// 触发文件选择的按钮
floatingActionButton: FloatingActionButton(
  onPressed: () {
    context.read<TranscriberOverviewBloc>().add(TranscriberOverviewPickTrackRequested());
  },
  child: const Icon(Icons.add)
)

// 监听状态变化的UI组件
BlocBuilder<TranscriberOverviewBloc, TranscriberOverviewState>(
  builder: (context, state) {
    if (state is TranscriberOverviewLoading) {
      return const CircularProgressIndicator();
    }
    if (state is TranscriberOverviewError) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(state.message, style: const TextStyle(color: Colors.red)),
      );
    }
    if (state is TranscriberOverviewTrackAddedSuccess) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('已添加曲目: ${state.track.name}'),
      );
    }
    return const SizedBox.shrink();
  },
)

为什么这样做？ #

• Bloc无UI：Bloc依赖抽象的FilePickerService，不直接调用任何UI组件，避免了UI与业务逻辑的耦合，也方便后续替换文件选择实现。
• UI无业务逻辑：UI只负责触发事件和展示状态，所有文件读取、Track转换、业务处理都在Bloc中完成，符合单一职责原则。
• 可测试性：单元测试Bloc时，可以MockFilePickerService，无需依赖真实的文件选择器，轻松覆盖各种场景。

内容的提问来源于stack exchange，提问作者Konrad Rösler