如何使用 Flutter 中的 Provider 增加电子商务购物车中的商品数量

Posted

技术标签:

【中文标题】如何使用 Flutter 中的 Provider 增加电子商务购物车中的商品数量【英文标题】:How to increase items Quantity in E-Commerce Cart using Provider in Flutter 【发布时间】:2020-10-15 04:17:12 【问题描述】:

当我点击产品视图中的添加按钮或多次添加到购物车时,我想增加产品数量,但我不增加它的数量保持不变,有人帮我解决了这个问题。如何为项目提供索引?

我正在使用 Provider 进行状态管理

ProviderSpace.dart

import 'dart:collection';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';

class AddItem extends ChangeNotifier 
  List<Cart> _addNewData = [];


  int get newDataCount 
    return _addNewData.length;
  

  UnmodifiableListView<Cart> get tasks 
    return UnmodifiableListView(_addNewData);
  

  void addCardManager(String itemName, String assetName, int itemRate,
      int quantity, String type) 
    final newAddItem = Cart(
      name: itemName,
      type: type,
      rate: itemRate,
      asset: assetName,
    );
    _addNewData.add(newAddItem);
    notifyListeners();
  

  void updateTask(Cart task) 
    task.toggleDone();
    notifyListeners();
  

  void decrease(Cart task) 
    task.decreaseDown();
    notifyListeners();
  

  void removeCard(Cart task) 
    _addNewData.remove(task);
    notifyListeners();
  


class Cart 
  final String name;
  final String asset;
  final String type;
  final int rate;
  int quantity;

  Cart(
    this.name,
    this.asset,
    this.type,
    this.rate,
    this.quantity = 1,
  );

  void toggleDone() 
    quantity++;
  

  void decreaseDown() 
    quantity == 0 ? 0 : quantity--;
  


我需要更新值的代码

          changeButtonOnTap
                ? Container(
                    width: 80,
                    height: 25,
                    child: FlatButton(
                      onPressed: () 
                        Provider.of<AddItem>(context, listen: false)
                            .addCardManager(widget.name, widget.name,
                                widget.mrp, widget.quantity, widget.type);
                        setState(() 
                          changeButtonOnTap = false;
                        );
                      ,
                      color: Color(0xffFF6200),
                      child: Text("Add",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 11,
                            color: Color(0xffffffff),
                          )),
                    ),
                  )
                : Container(
                    height: 25.00,
                    width: 80,
                    decoration: BoxDecoration(
                      color: Color(0xffFF6200),
                      borderRadius: BorderRadius.circular(30.00),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        GestureDetector(
                            onTap: ()                                           <-----here i need to make change
                              Provider.of<AddItem>(context, listen: false)
                                  .updateTask(Provider.of<AddItem>(context,
                                          listen: false)
                                      .tasks[0]);
                              setState(() 
                                value++;
                                print(Provider.of<AddItem>(context,
                                        listen: false)
                                    .newDataCount);
                              );
                            ,
                            child: Icon(Icons.add_circle,
                                color: Colors.white)),
                        Text(
                          value.toString(),
                          style: TextStyle(color: Colors.white),
                        ),
                        GestureDetector(
                          onTap: () 
                            setState(() 
                              value >= 2 ? value-- : null;
                            );
                          ,
                          child: Icon(
                            Icons.do_not_disturb_on,
                            color: Colors.white,
                          ),
                        )
                      ],
                    ),
                  )

【问题讨论】:

你找到解决办法了吗? @SurajKhanal 我为上述问题添加了我想出的答案......下面的答案完美无缺......我在我的大部分电子商务应用程序购物车中都使用了这个代码 感谢您发布解决方案。 【参考方案1】:

以下代码用于增加物品的数量(如果添加相同的物品)

  void addCardManager(String itemName, String assetName, int itemRate,
    int ogRate, int quantity, String type) 
    final newAddItem = Cart(
      name: itemName,
      type: type,
      rate: itemRate,
      ogPrice: ogRate,
      asset: assetName,
    );
    if (_addNewData.length != 0) 
      bool isFound = false;
      for (int itemcount = 0; itemcount < newDataCount; itemcount++) 
        if (_addNewData[itemcount].name == newAddItem.name) 
          print("addCard");
          isFound = true;
          _addNewData[itemcount].toggleDone();
          notifyListeners();
          break;
        
      
      if (!isFound) 
        _addNewData.add(newAddItem);
        notifyListeners();
      
     else 
      _addNewData.add(newAddItem);
      notifyListeners();
    
  

  void removeCardManager(String itemName, String assetName, int itemRate,
      int quantity, String type) 
    final newAddItem = Cart(
      name: itemName,
      type: type,
      rate: itemRate,
      asset: assetName,
    );
    print(_addNewData);
    if (_addNewData.length != 0) 
      bool isFound = false;

      for (int itemcount = 0; itemcount < newDataCount; itemcount++) 
        if (_addNewData[itemcount].name == newAddItem.name) 
          print("RemoveCard");
          isFound = true;
          decrease(_addNewData[itemcount]);
          notifyListeners();
          break;
        
      

    
  

作为参考,我将添加链接到上述代码的完整代码

  void updateTask(Cart task) 
    task.toggleDone();
    notifyListeners();
  

  void decrease(Cart task) 
    if (task.quantity == 1) 
      removeCard(task);
    
    task.decreaseDown();
    notifyListeners();
  

  void removeCard(Cart task) 
    _addNewData.remove(task);
    notifyListeners();
  


class Cart 
  final String name;
  final String asset;
  final int ogPrice;
  final String type;
  final int rate;
  int quantity;

  Cart(
    this.name,
    this.ogPrice,
    this.asset,
    this.type,
    this.rate,
    this.quantity = 1,
  );

  void toggleDone() 
    quantity++;
  

  void decreaseDown() 
    quantity == 0 ? 0 : quantity--;
  

【讨论】:

以上是关于如何使用 Flutter 中的 Provider 增加电子商务购物车中的商品数量的主要内容,如果未能解决你的问题,请参考以下文章

如何关闭 ChangeNotifier Provider Flutter 中的函数

如何在flutter的build方法中调用provider中的方法?

如何在 Hot Reload 上使用 Provider 维护 Flutter Global BloC 状态?

Flutter 中的 Bloc Provider 和 Normal Provider 有啥区别?

如何使用 Provider 实现 Flutter 本地化?

flutter中的状态管理Provider