如何使用Flutter+Sqflite+BloC实现WooCommerce商品数量增减及订单提交

1. 调整Product模型结构 #

不要直接修改原始的Product数据源模型，建议扩展一个购物车/订单项专用的字段，避免和接口返回的商品基础属性冲突：

class Product {
  // 原有字段：id、name、price、imageUrl等 WooCommerce 接口返回属性
  final int id;
  final String name;
  final double price;
  // 新增数量字段，默认值设为1即可
  int quantity;

  Product({
    required this.id,
    required this.name,
    required this.price,
    this.quantity = 1,
  });
}

如果担心和原始接口序列化逻辑冲突，可以单独封装CartItem类，包含Product实例和quantity字段，耦合度更低

2. 订单项Widget实现增减逻辑 #

Widget层面直接和Cubit交互，不需要维护本地状态：

class OrderItemWidget extends StatelessWidget {
  final Product product;
  const OrderItemWidget({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 商品展示部分省略
        Row(
          children: [
            IconButton(
              onPressed: () {
                if (product.quantity > 1) {
                  context.read<CartCubit>().updateQuantity(
                    product.id, 
                    product.quantity - 1
                  );
                } else {
                  // 数量为1时点减号可以做删除商品逻辑
                  context.read<CartCubit>().removeProduct(product.id);
                }
              },
              icon: const Icon(Icons.remove),
            ),
            Text('${product.quantity}'),
            IconButton(
              onPressed: () {
                context.read<CartCubit>().updateQuantity(
                  product.id, 
                  product.quantity + 1
                );
              },
              icon: const Icon(Icons.add),
            ),
          ],
        )
      ],
    );
  }
}

3. Cubit层逻辑处理 #

State中维护商品列表，提供增删改数量的方法：

状态定义 #

class CartState {
  final List<Product> products;
  final double totalPrice;
  const CartState({required this.products, required this.totalPrice});
}

Cubit实现 #

class CartCubit extends Cubit<CartState> {
  CartCubit() : super(const CartState(products: [], totalPrice: 0));

  // 更新商品数量
  void updateQuantity(int productId, int newQuantity) {
    final updatedProducts = state.products.map((product) {
      if (product.id == productId) {
        product.quantity = newQuantity;
      }
      return product;
    }).toList();
    final total = _calculateTotal(updatedProducts);
    emit(CartState(products: updatedProducts, totalPrice: total));
  }

  // 新增商品到购物车
  void addProduct(Product product) {
    final existingIndex = state.products.indexWhere((p) => p.id == product.id);
    List<Product> updatedProducts;
    if (existingIndex >= 0) {
      // 已存在的商品直接加数量
      updatedProducts = List.from(state.products);
      updatedProducts[existingIndex].quantity += 1;
    } else {
      updatedProducts = List.from(state.products)..add(product);
    }
    final total = _calculateTotal(updatedProducts);
    emit(CartState(products: updatedProducts, totalPrice: total));
  }

  // 删除商品
  void removeProduct(int productId) {
    final updatedProducts = state.products.where((p) => p.id != productId).toList();
    final total = _calculateTotal(updatedProducts);
    emit(CartState(products: updatedProducts, totalPrice: total));
  }

  // 计算总价
  double _calculateTotal(List<Product> products) {
    return products.fold(0, (sum, product) => sum + (product.price * product.quantity));
  }

  // 提交订单逻辑
  Future<void> submitOrder() async {
    // 构造WooCommerce需要的订单项参数
    final lineItems = state.products.map((product) {
      return {
        'product_id': product.id,
        'quantity': product.quantity,
      };
    }).toList();
    // 调用POST接口提交，包含lineItems参数即可
    // 接口请求逻辑省略
  }
}

4. Sqflite持久化适配 #

如果需要本地持久化购物车数据，存储时新增quantity字段，查询时把值赋值给Product模型的对应字段即可。

内容的提问来源于stack exchange，提问作者Ahmed Galal