《Flutter全栈开发实战指南：从零到高级》- 12 -状态管理Bloc

Bloc状态管理

为什么我的Flutter应用越来越难维护？

记得刚接触Flutter时，觉得setState简直太方便了。但随着项目规模扩大，问题也逐渐暴漏出来：

问题1：状态分散难以管理

// 不推荐
class ProductPage extends StatefulWidget {
  @override
  _ProductPageState createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  Product? _product;
  bool _isLoading = false;
  String? _errorMessage;
  bool _isFavorite = false;
  bool _isInCart = false;
  
  // 各种异步方法混在一起
  Future<void> _loadProduct() async {
    setState(() => _isLoading = true);
    try {
      _product = await repository.getProduct();
      _isFavorite = await repository.checkFavorite();
      _isInCart = await repository.checkCart();
    } catch (e) {
      _errorMessage = e.toString();
    } finally {
      setState(() => _isLoading = false);
    }
  }
}

问题2：跨组件状态共享困难

// 用户登录后，需要同步更新多个组件
class Header extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 如何获取用户状态？
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 如何获取用户状态？
  }
}

class Sidebar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 如何获取用户状态？
  }
}

问题3：业务逻辑与UI耦合

// 业务逻辑分散在UI层，难以测试和维护
void _onAddToCart() async {
  // 验证登录状态
  // 检查库存
  // 调用API
  // 更新本地状态
  // 显示结果提示
  // 所有这些逻辑都混在一起！
}

面对这些问题，进行了多种状态管理方案尝试，最终发现Bloc提供了最清晰的架构和最佳的可维护性。

一、Bloc核心原理：单向数据流

1.1 Bloc

Bloc的核心思想可以用一句话概括：UI只关心显示什么，不关心为什么这样显示。

1.2 Bloc架构图

先通过一个完整的架构图来理解Bloc的各个组成部分：

graph TB subgraph "UI Layer (表示层)" A[Widgets] --> B[发送 Events] C[BlocBuilder] --> D[重建 UI] E[BlocListener] --> F[处理副作用] end subgraph "Bloc Layer (业务逻辑层)" B --> G[Bloc] G --> H[States] H --> C H --> E subgraph "Bloc内部结构" G --> I[Event Handler] I --> J[业务逻辑] J --> K[State Emitter] K --> H end end subgraph "Data Layer (数据层)" J --> L[Repository] L --> M[Local Data] L --> N[Remote Data] M --> O[SQLite/SharedPrefs] N --> P[API/Network] end style G fill:#e1f5fe style J fill:#f3e5f5 style L fill:#e8f5e8

架构分层详解：

层级	职责	对应代码
UI层	显示界面、用户交互	Widget、BlocBuilder、BlocListener
Bloc层	处理业务逻辑、状态管理	Bloc、Cubit、Event、State
数据层	数据获取和持久化	Repository、DataSource、Model

1.3 数据流向原理

Bloc采用严格的单向数据流，这是它可预测性的关键：

sequenceDiagram participant U as UI Widget participant B as Bloc participant R as Repository participant S as State U->>B: 发送 Event Note over B: 处理业务逻辑 B->>R: 调用数据方法 R->>B: 返回数据结果 B->>S: 发射新 State S->>U: 触发重建 Note over U: 根据State显示界面

数据流特点：

1. 单向性：数据只能沿一个方向流动
2. 可预测：相同的Event总是产生相同的State变化
3. 可追踪：可以清晰追踪状态变化的完整路径

二、Bloc核心概念

2.1 Event（事件）

Event代表从UI层发送到Bloc的"指令"，它描述了"要做什么"，但不关心"怎么做"。

Event设计原则

// 好的Event设计
abstract class ProductEvent {}

// 具体的事件 - 使用命名构造函数
class ProductEvent {
  const ProductEvent._();
  
  factory ProductEvent.load(String productId) = ProductLoadEvent;
  factory ProductEvent.addToCart(String productId, int quantity) = ProductAddToCartEvent;
  factory ProductEvent.toggleFavorite(String productId) = ProductToggleFavoriteEvent;
}

// 具体的事件类
class ProductLoadEvent extends ProductEvent {
  final String productId;
  const ProductLoadEvent(this.productId);
}

class ProductAddToCartEvent extends ProductEvent {
  final String productId;
  final int quantity;
  const ProductAddToCartEvent(this.productId, this.quantity);
}

class ProductToggleFavoriteEvent extends ProductEvent {
  final String productId;
  const ProductToggleFavoriteEvent(this.productId);
}

Event分类策略

在实际项目中，我会这样组织Event：

events/
├── product_event.dart
├── cart_event.dart
├── auth_event.dart
└── order_event.dart

2.2 State（状态）

State代表应用在某个时刻的完整状况，UI完全由State驱动。

State设计模式

// 状态基类
sealed class ProductState {
  const ProductState();
}

// 具体的状态类
class ProductInitialState extends ProductState {
  const ProductInitialState();
}

class ProductLoadingState extends ProductState {
  const ProductLoadingState();
}

class ProductLoadedState extends ProductState {
  final Product product;
  final bool isInCart;
  final bool isFavorite;
  
  const ProductLoadedState({
    required this.product,
    required this.isInCart,
    required this.isFavorite,
  });
  
  // 复制方法 - 用于不可变更新
  ProductLoadedState copyWith({
    Product? product,
    bool? isInCart,
    bool? isFavorite,
  }) {
    return ProductLoadedState(
      product: product ?? this.product,
      isInCart: isInCart ?? this.isInCart,
      isFavorite: isFavorite ?? this.isFavorite,
    );
  }
}

class ProductErrorState extends ProductState {
  final String message;
  final Object? error;
  
  const ProductErrorState(this.message, [this.error]);
}

State状态机模型

理解State之间的关系很重要，它们形成一个状态机：

stateDiagram-v2 [*] --> Initial: 初始化 Initial --> Loading: 开始加载 Loading --> Loaded: 加载成功 Loading --> Error: 加载失败 Loaded --> Loading: 重新加载 Loaded --> Updating: 开始更新 Updating --> Loaded: 更新成功 Updating --> Error: 更新失败 Error --> Loading: 重试 Error --> [*]: 重置

State设计要点：

• 包含UI需要的所有数据
• 使用final和const
• 便于调试和持久化
• 清晰区分加载、成功、错误等状态

2.3 Bloc

Bloc是连接Event和State的桥梁，包含所有的业务逻辑。

Bloc核心结构

class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final ProductRepository repository;
  
  ProductBloc({required this.repository}) : super(const ProductInitialState()) {
    // 注册事件处理器
    on<ProductLoadEvent>(_onLoad);
    on<ProductAddToCartEvent>(_onAddToCart);
    on<ProductToggleFavoriteEvent>(_onToggleFavorite);
  }
  
  // 事件处理方法的详细实现
  Future<void> _onLoad(
    ProductLoadEvent event,
    Emitter<ProductState> emit,
  ) async {
    try {
      emit(const ProductLoadingState());
      
      // 并行获取多个数据
      final results = await Future.wait([
        repository.getProduct(event.productId),
        repository.isInCart(event.productId),
        repository.isFavorite(event.productId),
      ]);
      
      final product = results[0] as Product;
      final isInCart = results[1] as bool;
      final isFavorite = results[2] as bool;
      
      emit(ProductLoadedState(
        product: product,
        isInCart: isInCart,
        isFavorite: isFavorite,
      ));
    } catch (error, stackTrace) {
      // 详细的错误处理
      emit(ProductErrorState(
        '加载商品失败',
        error,
      ));
      addError(error, stackTrace);
    }
  }
  
  Future<void> _onAddToCart(
    ProductAddToCartEvent event,
    Emitter<ProductState> emit,
  ) async {
    final currentState = state;
    
    // 状态保护
    if (currentState is! ProductLoadedState) return;
    
    try {
      emit(currentState.copyWith(isInCart: true));
      
      await repository.addToCart(event.productId, event.quantity);
    } catch (error) {
      emit(currentState.copyWith(isInCart: false));
      rethrow;
    }
  }
  
  Future<void> _onToggleFavorite(
    ProductToggleFavoriteEvent event,
    Emitter<ProductState> emit,
  ) async {
    final currentState = state;
    if (currentState is! ProductLoadedState) return;
    
    final newFavoriteStatus = !currentState.isFavorite;
    
    try {
      emit(currentState.copyWith(isFavorite: newFavoriteStatus));
      await repository.toggleFavorite(event.productId);
    } catch (error) {
      emit(currentState.copyWith(isFavorite: !newFavoriteStatus));
      rethrow;
    }
  }
}

Bloc内部工作原理

下面我们深入了解Bloc如何处理事件和状态：

graph TB A[Event输入] --> B[Event队列] B --> C[事件循环] subgraph "事件处理流程" C --> D{查找事件处理器} D --> E[找到处理器] E --> F[执行业务逻辑] F --> G[状态发射器] G --> H[状态输出] D --> I[无处理器] I --> J[忽略事件] end H --> K[State流] K --> L[UI更新] style F fill:#f3e5f5 style G fill:#e1f5fe

三、BlocBuilder与BlocListener

3.1 BlocBuilder

BlocBuilder监听状态变化并重建对应的UI部分。

基本使用模式

class ProductPage extends StatelessWidget {
  final String productId;
  
  const ProductPage({super.key, required this.productId});
  
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ProductBloc(
        repository: context.read<ProductRepository>(),
      )..add(ProductEvent.load(productId)),
      child: Scaffold(
        appBar: AppBar(title: const Text('商品详情')),
        body: const _ProductContent(),
      ),
    );
  }
}

class _ProductContent extends StatelessWidget {
  const _ProductContent();
  
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ProductBloc, ProductState>(
      builder: (context, state) {
        return switch (state) {
          ProductInitialState() => _buildInitialView(),
          ProductLoadingState() => _buildLoadingView(),
          ProductLoadedState(
            product: final product,
            isInCart: final isInCart,
            isFavorite: final isFavorite,
          ) => _buildProductView(product, isInCart, isFavorite, context),
          ProductErrorState(message: final message) => _buildErrorView(message),
        };
      },
    );
  }
  
  Widget _buildProductView(
    Product product,
    bool isInCart,
    bool isFavorite,
    BuildContext context,
  ) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 商品图片
          AspectRatio(
            aspectRatio: 1,
            child: Image.network(
              product.imageUrl,
              fit: BoxFit.cover,
            ),
          ),
          
          const SizedBox(height: 16),
          
          // 商品信息
          Text(
            product.name,
            style: Theme.of(context).textTheme.headlineSmall,
          ),
          
          const SizedBox(height: 8),
          
          // 价格
          Text(
            '¥${product.price}',
            style: Theme.of(context).textTheme.headlineMedium?.copyWith(
              color: Colors.red,
            ),
          ),
          
          const SizedBox(height: 16),
          
          // 描述
          Text(
            product.description,
            style: Theme.of(context).textTheme.bodyMedium,
          ),
          
          const SizedBox(height: 24),
          
          // 操作按钮区域
          _buildActionButtons(product, isInCart, isFavorite, context),
        ],
      ),
    );
  }
  
  Widget _buildActionButtons(
    Product product,
    bool isInCart,
    bool isFavorite,
    BuildContext context,
  ) {
    return Row(
      children: [
        // 收藏按钮
        IconButton(
          icon: Icon(
            isFavorite ? Icons.favorite : Icons.favorite_border,
            color: isFavorite ? Colors.red : Colors.grey,
          ),
          onPressed: () {
            context.read<ProductBloc>().add(
              ProductEvent.toggleFavorite(product.id),
            );
          },
        ),
        
        const Spacer(),
        
        // 购物车按钮
        FilledButton.icon(
          icon: const Icon(Icons.shopping_cart),
          label: Text(isInCart ? '已加购' : '加入购物车'),
          onPressed: isInCart ? null : () {
            context.read<ProductBloc>().add(
              ProductEvent.addToCart(product.id, 1),
            );
          },
        ),
      ],
    );
  }
  
  Widget _buildLoadingView() {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }
  
  Widget _buildErrorView(String message) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.error_outline, size: 64, color: Colors.red),
          const SizedBox(height: 16),
          Text('加载失败: $message'),
        ],
      ),
    );
  }
  
  Widget _buildInitialView() {
    return const Center(
      child: Text('准备加载商品信息...'),
    );
  }
}

BlocBuilder性能优化

// 不推荐 - 整个页面重建
BlocBuilder<ProductBloc, ProductState>(
  builder: (context, state) {
    return Scaffold(
      appBar: AppBar(title: Text('商品')), // 每次重建
      body: _buildBody(state), // 每次重建
    );
  },
)

// 推荐 - 局部重建
Scaffold(
  appBar: const AppBar(title: Text('商品')), // 不重建
  body: BlocBuilder<ProductBloc, ProductState>(
    builder: (context, state) {
      return _buildBody(state); // 只有这部分重建
    },
  ),
)

Column(
  children: [
    const Header(), 
    BlocBuilder<ProductBloc, ProductState>(
      builder: (context, state) {
        return ProductImage(state.product.imageUrl);
      },
    ),
    BlocBuilder<ProductBloc, ProductState>(
      builder: (context, state) {
        return ProductInfo(state.product); 
      },
    ),
    BlocBuilder<ProductBloc, ProductState>(
      builder: (context, state) {
        return ActionButtons(state); 
      },
    ),
  ],
)

3.2 BlocListener

BlocListener用于响应状态变化执行一次性操作，如导航、显示对话框等。

处理模式

class _ProductContent extends StatelessWidget {
  const _ProductContent();
  
  @override
  Widget build(BuildContext context) {
    return BlocListener<ProductBloc, ProductState>(
      listener: (context, state) {
        // 处理错误状态
        if (state is ProductErrorState) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(state.message),
              backgroundColor: Colors.red,
            ),
          );
        }
        
        // 处理成功加入购物车
        if (state is ProductLoadedState && state.isInCart) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('成功加入购物车！'),
              backgroundColor: Colors.green,
            ),
          );
        }
        
        // 处理特定业务逻辑
        _handleSpecialStates(state, context);
      },
      child: BlocBuilder<ProductBloc, ProductState>(
        builder: (context, state) {
          // UI构建逻辑
          return _buildContent(state);
        },
      ),
    );
  }
  
  void _handleSpecialStates(ProductState state, BuildContext context) {
    switch (state) {
      case ProductLoadedState(:final product) when product.stock < 10:
        // 库存不足提示
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('${product.name} 库存紧张！'),
            backgroundColor: Colors.orange,
          ),
        );
      case ProductLoadedState(:final product) when product.isNew:
        // 新品提示
        _showNewProductDialog(context, product);
      default:
        break;
    }
  }
  
  void _showNewProductDialog(BuildContext context, Product product) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('新品上架！'),
        content: Text('${product.name} 是刚刚上架的新品！'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('知道了'),
          ),
        ],
      ),
    );
  }
}

3.3 BlocConsumer

当需要同时使用Builder和Listener时，BlocConsumer提供了更简洁的写法。

BlocConsumer<ProductBloc, ProductState>(
  listener: (context, state) {
    // 处理副作用
    if (state is ProductErrorState) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.message)),
      );
    }
  },
  builder: (context, state) {
    // 构建UI
    return switch (state) {
      ProductLoadedState(:final product) => ProductDetails(product: product),
      _ => const LoadingIndicator(),
    };
  },
)

四、 多Bloc协作模式

class AddToCartButton extends StatelessWidget {
  final String productId;
  
  const AddToCartButton({super.key, required this.productId});
  
  @override
  Widget build(BuildContext context) {
    return BlocListener<CartBloc, CartState>(
      listener: (context, state) {
        // 监听购物车状态变化
        if (state is CartErrorState) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(state.message)),
          );
        }
      },
      child: BlocBuilder<ProductBloc, ProductState>(
        builder: (context, productState) {
          final isInCart = switch (productState) {
            ProductLoadedState(:final isInCart) => isInCart,
            _ => false,
          };
          
          return FilledButton(
            onPressed: isInCart ? null : () {
              // 同时更新商品状态和购物车状态
              context.read<ProductBloc>().add(
                ProductEvent.addToCart(productId, 1),
              );
              context.read<CartBloc>().add(
                CartAddItemEvent(productId, 1),
              );
            },
            child: Text(isInCart ? '已加入购物车' : '加入购物车'),
          );
        },
      ),
    );
  }
}

4.1 Bloc间通信模式

方式1：直接事件传递

// 在商品Bloc中监听购物车事件
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final CartBloc cartBloc;
  
  ProductBloc({required this.cartBloc}) : super(const ProductInitialState()) {
    // 监听购物车变化
    cartBloc.stream.listen((cartState) {
      if (cartState is CartLoadedState && state is ProductLoadedState) {
        // 同步购物车状态
        final isInCart = cartState.items.any(
          (item) => item.productId == (state as ProductLoadedState).product.id,
        );
        add(ProductSyncCartEvent(isInCart));
      }
    });
  }
}

方式2：通过Repository共享状态

class CartRepository {
  final StreamController<Cart> _cartController = StreamController.broadcast();
  
  Stream<Cart> get cartStream => _cartController.stream;
  
  Future<void> addItem(String productId, int quantity) async {
    // 添加商品逻辑...
    _cartController.add(updatedCart);
  }
}

// 多个Bloc监听同一个Repository
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final CartRepository cartRepository;
  StreamSubscription? _cartSubscription;
  
  ProductBloc({required this.cartRepository}) : super(const ProductInitialState()) {
    // 监听购物车变化
    _cartSubscription = cartRepository.cartStream.listen((cart) {
      if (state is ProductLoadedState) {
        final isInCart = cart.items.any(
          (item) => item.productId == (state as ProductLoadedState).product.id,
        );
        add(ProductSyncCartEvent(isInCart));
      }
    });
  }
  
  @override
  Future<void> close() {
    _cartSubscription?.cancel();
    return super.close();
  }
}

4.2 高级模式：Bloc转换器和并发控制

class ProductBloc extends Bloc<ProductEvent, ProductState> {
  ProductBloc() : super(const ProductInitialState()) {
    on<ProductEvent>(
      _onEvent,
      // 转换器配置
      transformer: (events, mapper) {
        return events
            .debounceTime(const Duration(milliseconds: 300)) // 防抖
            .asyncExpand(mapper); // 并发控制
      },
    );
  }
  
  Future<void> _onEvent(
    ProductEvent event,
    Emitter<ProductState> emit,
  ) async {
    // 事件处理逻辑
  }
}

五、项目结构

5.1 完整的项目结构

lib/
├── src/
│   ├── app/                    # 应用层
│   │   ├── app.dart
│   │   └── routes/
│   ├── features/               # 功能模块
│   │   ├── product/
│   │   │   ├── bloc/          # Bloc相关
│   │   │   │   ├── product_bloc.dart
│   │   │   │   ├── product_event.dart
│   │   │   │   ├── product_state.dart
│   │   │   │   └── product_bloc.freezed.dart
│   │   │   ├── views/         # 页面
│   │   │   ├── widgets/       # 组件
│   │   │   └── models/        # 模型
│   │   ├── cart/
│   │   └── auth/
│   ├── core/                   # 核心层
│   │   ├── bloc/              # Bloc基础设施
│   │   │   ├── app_bloc_observer.dart
│   │   │   └── bloc_providers.dart
│   │   ├── data/              # 数据层
│   │   │   ├── repositories/
│   │   │   ├── datasources/
│   │   │   └── models/
│   │   ├── di/                # 依赖注入
│   │   │   └── service_locator.dart
│   │   └── utils/             # 工具类
│   └── shared/                # 共享资源
│       ├── widgets/
│       ├── themes/
│       └── constants/
└── main.dart

5.2 依赖注入配置

// service_locator.dart
final getIt = GetIt.instance;

void setupDependencies() {
  // 数据层
  getIt.registerLazySingleton<ProductRepository>(
    () => ProductRepositoryImpl(
      localDataSource: getIt(),
      remoteDataSource: getIt(),
    ),
  );
  
  getIt.registerLazySingleton<CartRepository>(
    () => CartRepositoryImpl(
      localDataSource: getIt(),
      remoteDataSource: getIt(),
    ),
  );
  
  // Bloc层 - 使用工厂，因为可能有多个实例
  getIt.registerFactoryParam<ProductBloc, String, void>(
    (productId, _) => ProductBloc(
      repository: getIt<ProductRepository>(),
      productId: productId,
    ),
  );
  
  // 购物车Bloc使用单例，因为全局只有一个购物车
  getIt.registerLazySingleton<CartBloc>(
    () => CartBloc(repository: getIt<CartRepository>()),
  );
  
  // 认证Bloc使用单例
  getIt.registerLazySingleton<AuthBloc>(
    () => AuthBloc(repository: getIt<AuthRepository>()),
  );
}

5.3 应用启动配置

void main() {
  // 确保Widget绑定初始化
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置依赖注入
  setupDependencies();
  
  // 设置Bloc观察者
  Bloc.observer = AppBlocObserver();
  
  // 错误处理
  BlocOverrides.runZoned(
    () => runApp(const MyApp()),
    blocObserver: AppBlocObserver(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        // 全局Bloc
        BlocProvider(create: (context) => getIt<AuthBloc>()),
        BlocProvider(create: (context) => getIt<CartBloc>()),
      ],
      child: MaterialApp(
        title: '电商应用',
        theme: AppTheme.light,
        darkTheme: AppTheme.dark,
        home: BlocBuilder<AuthBloc, AuthState>(
          builder: (context, state) {
            return switch (state) {
              AuthAuthenticated() => const HomePage(),
              _ => const LoginPage(),
            };
          },
        ),
        routes: AppRoutes.routes,
      ),
    );
  }
}

六、单元测试

6.1 Bloc单元测试

void main() {
  group('ProductBloc测试', () {
    late ProductBloc productBloc;
    late MockProductRepository mockRepository;
    
    setUp(() {
      mockRepository = MockProductRepository();
      productBloc = ProductBloc(repository: mockRepository);
    });
    
    tearDown(() {
      productBloc.close();
    });
    
    test('初始状态正确', () {
      expect(productBloc.state, equals(const ProductInitialState()));
    });
    
    test('加载商品成功流程', () async {
      // 准备
      const product = Product(
        id: '1',
        name: '测试商品',
        price: 100,
        imageUrl: 'test.jpg',
        description: '测试描述',
      );
      
      when(mockRepository.getProduct('1'))
          .thenAnswer((_) async => product);
      when(mockRepository.isInCart('1'))
          .thenAnswer((_) async => false);
      when(mockRepository.isFavorite('1'))
          .thenAnswer((_) async => true);
      
      // 期望的状态序列
      final expectedStates = [
        const ProductInitialState(),
        const ProductLoadingState(),
        const ProductLoadedState(
          product: product,
          isInCart: false,
          isFavorite: true,
        ),
      ];
      
      // 执行并验证
      expectLater(
        productBloc.stream,
        emitsInOrder(expectedStates),
      );
      
      productBloc.add(const ProductEvent.load('1'));
    });
    
    test('添加到购物车成功', () async {
      // 先加载商品
      const product = Product(id: '1', name: '测试商品', price: 100);
      when(mockRepository.getProduct('1')).thenAnswer((_) async => product);
      when(mockRepository.isInCart('1')).thenAnswer((_) async => false);
      when(mockRepository.isFavorite('1')).thenAnswer((_) async => false);
      
      productBloc.add(const ProductEvent.load('1'));
      await pumpEventQueue();
      
      // 准备添加到购物车
      when(mockRepository.addToCart('1', 1))
          .thenAnswer((_) async {});
      
      // 执行添加到购物车
      productBloc.add(const ProductEvent.addToCart('1', 1));
      
      // 验证状态变化
      await expectLater(
        productBloc.stream,
        emitsThrough(
          const ProductLoadedState(
            product: product,
            isInCart: true,  // 应该变为true
            isFavorite: false,
          ),
        ),
      );
    });
  });
}

6.2 Widget测试

void main() {
  group('ProductPage Widget测试', () {
    testWidgets('显示加载状态', (WidgetTester tester) async {
      // 创建测试Bloc
      final productBloc = MockProductBloc();
      when(productBloc.state).thenReturn(const ProductLoadingState());
      
      await tester.pumpWidget(
        MaterialApp(
          home: BlocProvider.value(
            value: productBloc,
            child: const ProductPage(productId: '1'),
          ),
        ),
      );
      
      // 验证显示加载指示器
      expect(find.byType(CircularProgressIndicator), findsOneWidget);
    });
    
    testWidgets('显示商品信息', (WidgetTester tester) async {
      final productBloc = MockProductBloc();
      const product = Product(
        id: '1',
        name: '测试商品',
        price: 100,
        imageUrl: 'test.jpg',
        description: '测试描述',
      );
      
      when(productBloc.state).thenReturn(
        const ProductLoadedState(
          product: product,
          isInCart: false,
          isFavorite: false,
        ),
      );
      
      await tester.pumpWidget(
        MaterialApp(
          home: BlocProvider.value(
            value: productBloc,
            child: const ProductPage(productId: '1'),
          ),
        ),
      );
      
      // 验证商品信息显示
      expect(find.text('测试商品'), findsOneWidget);
      expect(find.text('¥100'), findsOneWidget);
      expect(find.text('测试描述'), findsOneWidget);
    });
  });
}

结语

通过以上学习，我们系统掌握了Bloc状态管理的完整体系：架构思想、三大核心概念、核心组件、高级特性，如果觉得这篇文章对你有帮助，别忘了一键三连（点赞、关注、收藏）~~~** 在实际开发中遇到任何Bloc相关问题，欢迎在评论区留言。

---

版权声明：本文内容基于多个商业项目实战经验总结，欢迎分享交流，但请注明出处。