dart - 购物车的 Bloc 柜台
问题描述
我正在尝试使用 bloc 模式构建一个购物车,因为这是我在 Flutter 中的第一个应用程序以及使用 bloc。我的问题是,每次用户将产品添加到购物车时,我都试图获取 int 流。但似乎我使用的接收器和流错误,但我不知道确切的位置
项目计数器块
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}')
此外,我还有另一个用于将商品添加到购物车的集团。
解决方案
有一个关于如何构建购物车系统的完整示例。包括以下部分:
- 从购物车中添加/删除项目
- 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});
}
推荐阅读
- azure - 我们可以使用 Azure CLI 将文件上传到 Azure Data Lake Storage Gen2
- javascript - 查找匹配给定字符串中的两个子子字符串的正则表达式
- c - 如何添加十六进制数字?
- node.js - TyperError:团队不是构造函数
- angularjs - 如何使用 AngularJs 删除数组项属性
- vue.js - 未为侦听器 Vue js 定义事件发射器参数
- google-cloud-platform - Bigquery Queryjobconfig 标签未出现在计费导出中
- h2o - H2O Flow 未在拆分帧部分显示我的 .hex 文件
- excel - Excel Vba IE_automate:如何触发下拉列表的更改
- vb.net - 有人使用过新的 Google 搜索 API 吗?