Question

我正在尝试实现具有添加和删除数量功能的购物车功能。我正在使用controller.text并更新到文本字段，我的问题是当我添加和删除所有更新的列表项时，由于相同的文本字段控制器，如何单独更新每个项目？

ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount: (data != null) ? (data["items"].length) * 20 : 0,
    itemBuilder: (BuildContext context, int index) {

      return Container(
        child: Column(
        children: <widget>[
        Container(
        alignment: Alignment.topLeft,
        width: double.infinity,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
                margin: const EdgeInsets.only(top: 8.0),
                color: Colors.white,
                child: ButtonTheme(
                  height: 16.0,
                  minWidth: 10.0,
                  child: RaisedButton(
                      padding: const EdgeInsets.all(4.0),
                      color: Colors.white,
                      child: Icon(Icons.remove,color: Colors.black,size: 20.0,),
                      onPressed: _removeQuantity
                  ),
                )
            ),

            Container(
                width: 60.0,
                padding: const EdgeInsets.only(left: 1.0,right: 1.0),
                child: Center(
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: new InputDecoration(
                      hintText: "1",
                    ),
                    keyboardType: TextInputType.number,
                    controller: _quantityController,
                  ),
                )
            ),

            Container(
              margin: const EdgeInsets.only(top: 8.0),
              color: Colors.white,
              child: ButtonTheme(
                height: 16.0,
                minWidth: 10.0,
                child: RaisedButton(
                    padding: const EdgeInsets.all(4.0),
                    color: Colors.white,
                    child: Icon(Icons.add,color: Colors.black,size: 20.0),
                    onPressed: _addQuantity
                ),
              ),
            ),

          ],
        ),
      ),
      ]

功能

void _addQuantity(){
  setState(() {
    quantity++;
    _quantityController.text = '$quantity';
  });
}

void _removeQuantity(){
  setState(() {

    if(quantity > 0){
      quantity--;
    }else{
      quantity = 0;
    }
    _quantityController.text = '$quantity';
  });
}

Answer 1

您需要为每个文本字段提供不同的控制器。

创建控制器列表

List<TextEditingController> _quantityController = new List();

并在您的代码中使用

ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount: (data != null) ? (data["items"].length) * 20 : 0,
    itemBuilder: (BuildContext context, int index) {
     _quantityController.add(new TextEditingController());
      return Container(
        child: Column(
          children: <Widget>[
            Container(
              alignment: Alignment.topLeft,
              width: double.infinity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                      margin: const EdgeInsets.only(top: 8.0),
                      color: Colors.white,
                      child: ButtonTheme(
                        height: 16.0,
                        minWidth: 10.0,
                        child: RaisedButton(
                            padding: const EdgeInsets.all(4.0),
                            color: Colors.white,
                            child: Icon(Icons.remove, color: Colors.black,
                              size: 20.0,),
                            onPressed: ()=>_removeQuantity(index)
                        ),
                      )
                  ),

                  Container(
                      width: 60.0,
                      padding: const EdgeInsets.only(left: 1.0, right: 1.0),
                      child: Center(
                        child: TextField(
                          textAlign: TextAlign.center,
                          decoration: new InputDecoration(
                            hintText: "1",
                          ),
                          keyboardType: TextInputType.number,
                          controller: _quantityController[index],
                        ),
                      )
                  ),

                  Container(
                    margin: const EdgeInsets.only(top: 8.0),
                    color: Colors.white,
                    child: ButtonTheme(
                      height: 16.0,
                      minWidth: 10.0,
                      child: RaisedButton(
                          padding: const EdgeInsets.all(4.0),
                          color: Colors.white,
                          child: Icon(
                              Icons.add, color: Colors.black, size: 20.0),
                          onPressed: ()=>_addQuantity(index),
                      ),
                    ),
                  ),

                ],
              ),
            ),
          ],
        ),
      );
    },
);

现在您的功能将更改为

void _addQuantity(int index){
 setState(() {
   quantity++;
   _quantityController[index].text = '$quantity';
 });
}

void _removeQuantity(int index){
 setState(() {
   if(quantity > 0){
     quantity--;
   }else{
     quantity = 0;
   }
   _quantityController[index].text = '$quantity';
 });
}

别忘了将所有控制器都放置在最后。

Flutter Listview Builder在单击图标上添加和删除更新数量文本字段

1 个答案: