【问题标题】:Bloc counter for shopping cart购物车的 Bloc 柜台
【发布时间】:2019-06-30 12:25:14
【问题描述】:

我正在尝试使用 bloc 模式构建一个购物车,因为这是我在 Flutter 中的第一个应用程序以及使用 bloc。我的问题是,每次用户将产品添加到购物车时,我都试图获取一个 int 流。但似乎我使用的接收器和流错误,但我不知道确切的位置

ItemCounterBloc

  final _itemCounterSubject = BehaviorSubject<int>(seedValue: 0);
  final _cartItemsController = StreamController<List<CartItem>>();
  int count = 0;


  ItemCounterBloc(Item item){

    _cartItemsController.stream
    .map((list) => list.any((cartItem)=> cartItem.item == item))
    .listen((increment){
      count += 1;
      _itemCounterSubject.add(count);
    });


  }
  Sink<List<CartItem>> get cartItems => _cartItemsController.sink;

  ValueObservable<int> get isInCart => _itemCounterSubject.stream.distinct().shareValue(seedValue: 0);

  void dispose(){
    _cartItemsController.close();
    _itemCounterSubject.close();
  }
}

计数器

StreamBuilder<int>(
            stream: _bloc.isInCart,
            initialData:0,
            builder: (context, snapshot) => Text('${snapshot.data}')

我还有另一个用于将商品添加到购物车的模块。

【问题讨论】:

  • 一件令我印象深刻的事情:您正在使用带有返回 bool 的函数的 .map,但没有使用导致 .listen 回调- 所以 Stream 上的每个元素都会做一些工作并丢弃结果。您是否打算使用.where 过滤流?

标签: dart flutter bloc


【解决方案1】:

有一个关于如何构建购物车系统的完整示例。 包括以下部分:

  • 在购物车中添加/删除商品
  • AppBar 计数器显示购物车中的商品数量
  • 购物车 BLOC

https://github.com/Ephenodrom/FlutterAdvancedExamples/tree/master/lib/examples/shoppingCart

这就是你的 BLOC 的样子:

class ShoppingCartBloc implements BlocBase {
  static const String TAG = "ShoppingCartBloc";

  ShoppingCart cart = ShoppingCart();

  /// Sinks
  Sink<Product> get addition => itemAdditionController.sink;
  final itemAdditionController = StreamController<Product>();

  Sink<Product> get substraction => itemSubtractionController.sink;
  final itemSubtractionController = StreamController<Product>();

  /// Streams
  Stream<ShoppingCart> get cartStream => _cart.stream;
  final _cart = BehaviorSubject<ShoppingCart>();

  ShoppingCartBloc() {
    itemAdditionController.stream.listen(handleItemAdd);
    itemSubtractionController.stream.listen(handleItemRem);
  }

  ///
  /// Logic for product added to shopping cart.
  ///
  void handleItemAdd(Product item) {
    Logger(TAG).info("Add product to the shopping cart");
    cart.addProduct(item);
    cart.calculate();
    _cart.add(cart);
    return;
  }

  ///
  /// Logic for product removed from shopping cart.
  ///
  void handleItemRem(Product item) {
    Logger(TAG).info("Remove product from the shopping cart");
    cart.remProduct(item);
    cart.calculate();
    _cart.add(cart);
    return;
  }

  ///
  /// Clears the shopping cart
  ///
  void clearCart() {
    cart.clear();
  }

  @override
  void dispose() {
    itemAdditionController.close();
    itemSubtractionController.close();
  }
}

class ShoppingCart {
  List<Product> products = [];
  double priceNet;
  double priceGross;
  double vatAmount;

  void addProduct(Product p) {
    products.add(p);
  }

  void remProduct(Product p) {
    products.remove(p);
  }

  void calculate() {
    priceNet = 0;
    priceGross = 0;
    vatAmount = 0;
    products.forEach((p) {
      priceNet += p.priceNet;
      priceGross += p.priceGross;
      vatAmount += p.vatAmount;
    });
  }

  void clear() {
    products = [];
    priceNet = 0;
    priceGross = 0;
    vatAmount = 0;
  }
}

class Product {
  final String name;
  final double priceNet;
  final double priceGross;
  final double vatAmount;
  final double tax;

  Product(
      {this.name, this.priceNet, this.priceGross, this.vatAmount, this.tax});
}

【讨论】:

  • 如何将其与firestore集成并通过查询产品ID添加购物车详细信息屏幕?我尝试实现的示例购物车功能来自 SalesPlay POS 应用程序......我已经使用 Providers 完成了所有操作,但购物车除外。有什么建议吗?
猜你喜欢
  • 2021-03-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多