Question

就像在下面的示例图片中一样，我希望在按钮单击单个列表项时增加或减少数量。如果我在setState（）中增加计数器，它会在每个列表项中递增。我需要帮助，尤其是在处理Flutter中的特定列表项时。

！[样本图像] [2]
任何帮助表示赞赏提前致谢。

Sample Image

Answer 1

您需要做的就是以正确的方式重构您的小部件。您可以将<script> var myHTML = '\ <div>\ content\ </div>\ '; </script> s / items重构为单独的Card，以使每个增量/减量仅影响特定项而不影响整个列表。

检查此示例：

StatefulWdiget

Answer 2

如果您打算只获取 UI 代码。这是构建如此漂亮按钮的代码。

代码：

            Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      color: Theme.of(context).accentColor),
                  child: Row(
                    children: [
                      InkWell(
                          onTap: () {},
                          child: Icon(
                            Icons.remove,
                            color: Colors.white,
                            size: 16,
                          )),
                      Container(
                        margin: EdgeInsets.symmetric(horizontal: 3),
                        padding:
                            EdgeInsets.symmetric(horizontal: 3, vertical: 2),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(3),
                            color: Colors.white),
                        child: Text(
                          '3',
                          style: TextStyle(color: Colors.black, fontSize: 16),
                        ),
                      ),
                      InkWell(
                          onTap: () {},
                          child: Icon(
                            Icons.add,
                            color: Colors.white,
                            size: 16,
                          )),
                    ],
                  ),
                ),

Answer 3

将此代码添加为列或行的子代：

 itemData[index].ShouldVisible?
                             Center(
                                 child: Container(
                                   height: 30,
                                   width: 70,
                                   decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(4),
                                       border: Border.all(color: Colors.white70)
                                   ),
                                   child: Row(
                                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                     children: <Widget>[
                                       InkWell(
                                       onTap: (){
                                        setState(() {
                                          if(itemData[index].Counter <2)
                                            {
                                              itemData[index].ShouldVisible = !itemData[index].ShouldVisible;
                                            }else{
                                           itemData[index].Counter--;
                                          }

                                        });
                                       }
                                       ,child: Icon(Icons.remove,color: Colors.green,size: 18,)),
                                       Text('${itemData[index].Counter}',style: TextStyle(
                                         color: Colors.white70
                                       ),
                                       ),
                                       InkWell(
                                       onTap: (){
                                         setState(() {
                                           itemData[index].Counter++;
                                         });
                                       }
                                       ,child: Icon(Icons.add,color: Colors.green,size: 18,)),

                                     ],
                                   ),

                                 )
                             ) : Center(
                                child: Container(
                                  padding: EdgeInsets.all(5),
                                  height: 30,
                                  width: 70,
                                  decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(4),
                                    border: Border.all(color: Colors.white70)
                                  ),
                                  child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      Text('ADD',style: TextStyle(color: Colors.white70),
                                      ),
                                      InkWell(
                                        onTap: (){

                                          setState(() {
                                            itemData[index].ShouldVisible = ! itemData[index].ShouldVisible;
//                                          

                                          });
                                        }
                                          ,child: Center(child: Icon(Icons.add,color: Colors.green,size: 18,)))

                                    ],
                                  ),

                                ),
                              )

向您的数据结构添加计数器，并且应该显示如下所示。

class ItemData{
  String Name;
  int Counter;
  bool ShouldVisible;

  ItemData({
   this.Name,
    this.Counter,
    this.ShouldVisible
});
}

List<ItemData> itemData = [
ItemData(
  Name: 'Shoes 1',
  Counter: 1,
  ShouldVisible: false
),
  ItemData(
      Name: 'Shoes 2',
      Counter: 1,
      ShouldVisible: false
  ),];

Answer 4

我遇到了同样的问题并做了一个可重复使用的东西：

class QuantityButton extends StatefulWidget {
  final int initialQuantity;
  final Future<int>? Function(int) onQuantityChange;
  const QuantityButton(
      {Key? key, required this.initialQuantity, required this.onQuantityChange})
      : super(key: key);

  @override
  _QuantityButtonState createState() =>
      _QuantityButtonState(quantity: initialQuantity);
}

class _QuantityButtonState extends State<QuantityButton> {
  int quantity;
  bool isSaving = false;
  _QuantityButtonState({required this.quantity});

  void changeQuantity(int newQuantity) async {
    setState(() {
      isSaving = true;
    });
    newQuantity = await widget.onQuantityChange(newQuantity) ?? newQuantity;
    setState(() {
      quantity = newQuantity;
      isSaving = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      IconButton(
          color: Colors.black,
          onPressed: (isSaving || quantity < 1)
              ? null
              : () => changeQuantity(quantity - 1),
          icon: Icon(Icons.remove)),
      Text(quantity.toString()),
      IconButton(
          color: Colors.black,
          onPressed: (isSaving) ? null : () => changeQuantity(quantity + 1),
          icon: Icon(Icons.add)),
    ]);
  }
}

您现在可以简单地使用它：

Row(
  children: [
    Text(basketLine.product.title),
    Spacer(),
    QuantityButton(
        initialQuantity: basketLine.quantity,
        onQuantityChange: basketLine.updateQuantity,
    ),
  ],
)

虽然 updateQuantity 可以异步更新篮子（如果您希望 +/- 按钮被禁用以确保例如后端验证通过）并返回更新的数字，或者只是触发更新，返回 null（而不是等待它） ) 让小部件处理数字以获得更实时的体验。

如何增加Flutter中特定列表项的计数器？

4 个答案: