請問如何使用 getx package 使列表在 Flutter 中可觀察？

Question

我想制作一個購物車，所以為此我想將產品添加到一個可觀察的丟失中，我可以在其中更改來自不同頁面的不同產品的數量（我可以從詳細屏幕或購物車屏幕更改數量）所以每個產品必須有自己的數量，所以我不得不使用可觀察列表，那么我們如何聲明可觀察列表？

Answer 1

Getx 使列表可觀察 要使 flutter 列表可觀察，您需要在列表中添加 obs 詞。 您需要先聲明一個列表變量。

Answer 2

我正在為您分享一個更好的解決方案來實現此功能：

讓我們假設您的購物車數據是：

{
 "product" : {
    "ProductID": "10000",
    "ItemGroup": "",
    "ItemCode": "10000",
    "ProductName": "AIrPro Shoes",
    "BuyPrice": "3000",
    "MRP": "4500",
    "SalePrice": "4500",
    "GST": "0",
    "Remarks": "",
    "HSNCode": "",
    "Points": "0",
    "Brand": "Addidas",
    "PhyStock": "0",
    "PhyStockAmount": "0",
    "GroupName": "TF",
    "CategoryName": "00000",
    "CategoryID": "3",
    "Color": "",
    "Size": "",
    "IsImage": "True",
    "Images": [
      "Products/10000_A.png",
      "Products/10000_B.png"
    ]
  },
  "qty" : 1

}

您可以根據需要更改字段。

第 2 步：現在從此處創建上述數據的 dart model。 像這樣：

class CartItem {

 Product? product;
  int? qty;

  CartItem({this.product, this.qty});

  CartItem.fromJson(Map<String, dynamic> json) {
    product =
        json['product'] != null ? Product?.fromJson(json['product']) : null;
    qty = json['qty'];
  }

  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    if (product != null) {
      data['product'] = product?.toJson();
    }
    data['qty'] = qty;
    return data;
  }
}

class Product {
  String? productID;
  String? itemGroup;
  String? itemCode;
  String? productName;
  String? buyPrice;
  String? mRP;
  String? salePrice;
  String? gST;
  String? remarks;
  String? hSNCode;
  String? points;
  String? brand;
  String? phyStock;
  String? phyStockAmount;
  String? groupName;
  String? categoryName;
  String? categoryID;
  String? color;
  String? size;
  String? isImage;
  List<dynamic>? images;

  Product(
      {this.productID,
      this.itemGroup,
      this.itemCode,
      this.productName,
      this.buyPrice,
      this.mRP,
      this.salePrice,
      this.gST,
      this.remarks,
      this.hSNCode,
      this.points,
      this.brand,
      this.phyStock,
      this.phyStockAmount,
      this.groupName,
      this.categoryName,
      this.categoryID,
      this.color,
      this.size,
      this.isImage,
      this.images});

  Product.fromJson(Map<String, dynamic> json) {
    productID = json['ProductID'];
    itemGroup = json['ItemGroup'];
    itemCode = json['ItemCode'];
    productName = json['ProductName'];
    buyPrice = json['BuyPrice'];
    mRP = json['MRP'];
    salePrice = json['SalePrice'];
    gST = json['GST'];
    remarks = json['Remarks'];
    hSNCode = json['HSNCode'];
    points = json['Points'];
    brand = json['Brand'];
    phyStock = json['PhyStock'];
    phyStockAmount = json['PhyStockAmount'];
    groupName = json['GroupName'];
    categoryName = json['CategoryName'];
    categoryID = json['CategoryID'];
    color = json['Color'];
    size = json['Size'];
    isImage = json['IsImage'];
    images = json['Images'];
  }

  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    data['ProductID'] = productID;
    data['ItemGroup'] = itemGroup;
    data['ItemCode'] = itemCode;
    data['ProductName'] = productName;
    data['BuyPrice'] = buyPrice;
    data['MRP'] = mRP;
    data['SalePrice'] = salePrice;
    data['GST'] = gST;
    data['Remarks'] = remarks;
    data['HSNCode'] = hSNCode;
    data['Points'] = points;
    data['Brand'] = brand;
    data['PhyStock'] = phyStock;
    data['PhyStockAmount'] = phyStockAmount;
    data['GroupName'] = groupName;
    data['CategoryName'] = categoryName;
    data['CategoryID'] = categoryID;
    data['Color'] = color;
    data['Size'] = size;
    data['IsImage'] = isImage;
    data['Images'] = images;
    return data;
  }
}

現在像這樣創建 CartController class ：

class CartController extends GetxController {


 var cartData = <CartItem>[].obs;
  @override
  void onInit() {
    super.onInit();
  }

  addToCart(GetProductResponse item, context){
   
      if(getIndexByProductId(item.productID.toString())==-1){
        CartItem cartItem = CartItem();
        cartItem.product = Product.fromJson(item.toJson());
        cartItem.qty =1 ;
        cartData.value.add(cartItem);
        cartData.refresh();
      }
  }

  

  increaseQuantity(String productId, context){
    int index = getIndexByProductId(productId);
    if(index>-1){
        cartData.value[index].qty =cartData.value[index].qty!+1 ;
        cartData.refresh();

    }
  }

  getCartTotal(){
    double total = 0 ;
    if(cartData.value.length>0){
      cartData.value.forEach((element) {
        double itemtotal = element.qty! * (double.parse(element.product!.salePrice.toString())) ;
        total = total + itemtotal ;
      });
    }

    return total ;

  }

  removeFromCart(String productId){
    int index = getIndexByProductId(productId);
    if(index>-1){
      if(cartData.value[index].qty!>1){
        cartData.value[index].qty =cartData.value[index].qty!-1;
        cartData.refresh();
      }
      else{
        cartData.value.removeAt(index);
        cartData.refresh();
      }

    }
  }

  getIndexByProductId(String productId){
    int index = -1 ;
    cartData.forEach((element) {
      if(element.product!=null)
      if(element.product!.productID==productId){
        index = cartData.indexOf(element);
      }
    });
    return index ;
  }

}

如您所見，我們為所有任務提供 function：添加到購物車，從購物車中刪除，每次需要時都調用這些 function。

注意第一次你必須初始化購物車 controller：

CartController cartController = Get.put(CartController());

在此之后，您可以通過以下方式訪問購物車 controller：

CartController cartController = Get.find<CartController>();

最后你有cartController：

var cartData = <CartItem>[].obs;

您可以將此列表綁定到 obx 小部件內任何您想要的位置。 注意：您可以根據需要定制 model 或 function，例如查看庫存或任何其他情況。 保存以備后用