Flutter BloC 架构入门指南

最新推荐文章于 2025-10-28 14:40:19 发布

原创

最新推荐文章于 2025-10-28 14:40:19 发布 · 730 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #BloC

BLoC (Business Logic Component) 是 Flutter 中一种流行的状态管理架构，它可以帮助你将业务逻辑与 UI 分离，使代码更清晰、可测试性更强。

核心概念

1. BloC 的核心组件

Events：用户交互或系统事件（如按钮点击、网络请求完成）
States：应用的状态表示（如加载中、数据加载成功、错误）
Bloc：处理事件并发出新状态的业务逻辑组件

2. 数据流

UI → Event → BloC → State → UI

基础实现步骤

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_bloc: ^8.1.3
  bloc: ^8.1.2

运行 flutter pub get

2. 创建基本结构

定义事件 (Events)

// counter_event.dart
abstract class CounterEvent {
   
   }

class IncrementEvent extends CounterEvent {
   
   }

class DecrementEvent extends CounterEvent {
   
   }

定义状态 (States)

// counter_state.dart
class CounterState {
   
   
  final int count;
  
  CounterState(this.count);
}

创建 BloC

// counter_bloc.dart
import 'package:bloc/bloc.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
   
   
  CounterBloc() : super(CounterState(0)) {
   
   
    on<IncrementEvent>((event, emit) {
   
   
      emit(CounterState