Flutter如何跨页面监听BLoC事件 实现购物车与商品页状态同步

1. 调整CartBloc的提供作用域 #

监听未生效的最常见原因是CartBloc的作用域没有同时覆盖商品页和购物车页：

• 错误写法：跳转到购物车页时才通过BlocProvider创建CartBloc实例，此时仅购物车页能访问该实例，商品页不在该Bloc的上下文范围内，自然无法监听到状态变化。
• 正确写法：将CartBloc的提供层级提升到两个页面的共同父节点，比如App根节点：

void main() {
  runApp(
    BlocProvider(
      create: (context) => CartBloc(productsRepository: ProductsRepository()),
      child: const MyApp(),
    ),
  );
}

调整后两个页面都能获取到同一个CartBloc实例，状态变化可以跨页面传递。

2. 检查状态类的相等判断逻辑 #

如果你的CartState继承了Equatable，需要确保ItemRemovedFromCart状态所有变化的属性都已加入props数组，否则Bloc会判定前后状态相等，不会触发重建：

class ItemRemovedFromCart extends CartState {
  final List<CartItem> items;
  final List<int> counts;
  final List<int> filteredCounts;
  final List<CartItem> filteredItems;
  final List<int> originalIndices;

  const ItemRemovedFromCart({
    required this.items,
    required this.counts,
    required this.filteredCounts,
    required this.filteredItems,
    required this.originalIndices,
  });

  // 必须将所有变化属性加入props
  @override
  List<Object?> get props => [items, counts, filteredCounts, filteredItems, originalIndices];
}

3. 确认复选框取值逻辑 #

需要保证商品页CheckboxListTile的value每次重建时都读取最新的选中状态，不要使用页面初始化时缓存的旧selectedItemsList：

CheckboxListTile(
  // 每次build都从最新的repository/Bloc状态中读取选中列表判断
  value: productsRepository.selectedItemsList.contains(product.id),
  onChanged: (val) {
    // 选中/取消选中逻辑
  },
  title: Text(product.name),
)

验证排查步骤 #

可以分别在商品页和购物车页打印CartBloc实例的哈希值，确认两个页面访问的是同一个实例：

print(BlocProvider.of<CartBloc>(context).hashCode);

如果两次打印值不同，说明你创建了多个CartBloc实例，调整作用域即可解决。

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