如何在列表视图中为单个项目增加递减计数器

Question

我是初学者，我正在尝试增加和减少单个项目列表的计数器。它完美地显示了计数器，但是当我点击“+”时，它会增加所有列表项的计数器，或者当我按下“-”时，计数器会在所有列表项中减少。我也没有收到任何错误。我正在尝试实现这一点，以便我可以将递增或递减计数器及其列表数据传递到另一个购物车屏幕。我正在使用从我创建的节点 js 后端获取的 json 数据

[image][1]
[image][3]
[image][2]

     


  import 'package:flutter/material.dart';
    import 'package:flutter_app/NetworkHandler.dart';
    
    class ProductScreen extends StatefulWidget {
      @override
      _ProductScreenState createState() => _ProductScreenState();
    }
    
    class _ProductScreenState extends State<ProductScreen> {
    
      NetworkHandler networkHandler = NetworkHandler();
      List listOfProducts;
      bool addproduct ;
      int counter=1;
    
      @override
      void initState() {
        super.initState();
    
        addproduct = false;
        fetchData();
       
      }
    
      void fetchData() async {
        var response = await networkHandler.get("/add_product/getproducts");
        setState(() {
          listOfProducts = response["data"];
    
        });
      }
    
      void _incrementCounter() {
        setState(() {
          counter++;
        });
      }
    
      void _decrementCounter() {
        setState(() {
          counter--;
        });
      }
    
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                tabs: [
                  Tab(text: "Products",),
                  Tab(text: "Cart",)
                ],
              ),
            ),
            body:
            TabBarView(
              children: [
                listOfProducts == null ? Center(
                  child: Text("We don't have any Products Yet"),
                ) : ListView.builder(itemBuilder: (context,index){
                  return
                    Container(
                      height: 150,
                      padding: EdgeInsets.fromLTRB(15, 8, 15, 8),
                      width: MediaQuery.of(context).size.width,
                      child: Column(
                        // mainAxisAlignment: MainAxisAlignment.start,
                        //crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            
                            children: <Widget>[
    
                              SizedBox(
                                height: 110,
                                width: 100,
                                child: Container(
                                  decoration: BoxDecoration(
                                      image: DecorationImage(
                                         image: NetworkHandler().getImage(listOfProducts[index] ['_id']),
                                          fit: BoxFit.contain),
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(12),
                                        bottomLeft: Radius.circular(12),
                                        topRight: Radius.circular(12),
                                        bottomRight: Radius.circular(12),
                                      )),
                                ),
                              ),
                              SizedBox(width: 10),
                               Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.center,
    
                                  children: [
                                    //productname (),
                                    Text(
                                      listOfProducts[index]['product_name'].toString(),
                                      style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20,
                                      ),
                                    ),
    
                                   
                                    Container(
                                      height: 30,
                                      width: MediaQuery.of(context).size.width-120,
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        crossAxisAlignment: CrossAxisAlignment.end,
                                        children: [                         
                                          Container(child: addproduct?addmore():add()
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                    );
    
                },
                itemCount: listOfProducts == null ? 0 : listOfProducts.length,
                ),
                /* Cart Screen */Container()
              ],
            ),
            ),
        );
      }
    
    
      Widget add(){
        return Container(
          height: 20,
          child: OutlineButton(
              onPressed: (){
    
                setState(() {
                  addproduct=true;
                });
              },
              borderSide: BorderSide(color: Colors.blue),
              //color: Colors.blueAccent,
              //disabledBorderColor: Colors.blueAccent,
              child: Text("ADD +",style: TextStyle(color: Colors.blue, fontSize: 16,fontWeight: 
                          FontWeight.normal),
              )
          ),
        );
    
      }
    
    
      Widget addmore(){
        return Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(4),
              bottomLeft: Radius.circular(4),
              topRight: Radius.circular(4),
              bottomRight: Radius.circular(4),
            ),
          ),
          child: Row(
            children: [
              InkWell(
                onTap: (){
    
                  if(counter==1) {
                    setState(() {
                      addproduct=false;
                    });
                  }
                  else{
                    _decrementCounter();
                  }
                },
                child: Container(
                  height: 18,
                  width: 25,
    
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4),
                        bottomLeft: Radius.circular(4),
                      ),
                      //border: Border.all(color: Colors.blueAccent),
    
                      shape: BoxShape.rectangle, color: Colors.white
                  ),
                  child: Center(
    
                    child: Text("-", style: TextStyle(
                        color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),),
                  ),
                ),
              ),
              Container(
                height: 18,
                width: 25,
    
                child: Center(
                  child: Text("$counter", style: TextStyle(
                    color: Colors.blueAccent, fontSize: 16,),),
                ),
              ),
              InkWell(
                onTap: (){
                  if(counter<=99){
                    _incrementCounter();
                  }
                },
                child: Container(
                  height: 18,
                  width: 25,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(4),
                        bottomRight: Radius.circular(4),
                      ),
                      shape: BoxShape.rectangle, color: Colors.white
                  ),
                  child: Center(
                    child: Text("+" , style: TextStyle(
                        color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),),
                  ),
                ),
              )
            ],
          ),
        );
    
      }
    
    
    
    }



   [1]: https://i.stack.imgur.com/vo8Y8.jpg
   [2]: https://i.stack.imgur.com/C69KA.jpg
   [3]: https://i.stack.imgur.com/ymut0.jpg

Answer 1

ListView.builder(
    itemCount: pondData.length,
    itemBuilder: (BuildContext context, int index) {
      var values = pondData[index];
      int n = index+1;

      return ListTile(
        title: Text("${values.name}"),
        trailing: IconButton(
          icon: Icon(Icons.edit),
          onPressed: () {},
        ),
        leading: Text(n.toString()),
        contentPadding: EdgeInsets.only(top: 4, left: 10, right: 10),
      );
    },
  ),

Answer 2

这种行为是正常的，因为只有一个计数器变量负责跟踪项目列表。

一种解决方案是实现一个简单的 Product 类，如下所示。

class Product {
  String id;
  String productName;
  int counter = 0;
  bool addProduct = false;

  Product({
    this.id,
    this.productName,
  });
}

然后，在您的 fetch data 方法中，您根据收到的数据创建 Product 实例。

 void fetchData() async {
    // async call

    listOfProducts = [
      {'_id': '1', 'product_name': 'a'},
      {'_id': '2', 'product_name': 'b'}
    ].map((item) {
      return Product(
        id: item['_id'],
        productName: item['product_name'],
      );
    }).toList();
  }

在您的 ListView 中，您会将索引传递给 add 或 addmore 等方法。

ListView.builder(
  itemBuilder: (context, index) {
    ...,
    Container(
      child: listOfProducts[index].addProduct
          ? addmore(index)
          : add(index),
    );
  },
  itemCount: listOfProducts == null ? 0 : listOfProducts.length,
)

最后，您需要更新引用 listOfProducts 中项目的所有 setState 语句。

void _incrementCounter(int index) {
  setState(() {
    listOfProducts[index].counter++;
  });
}