Question

我想显示列表数据，还要增加项目数量并减少how to make the design with increment and decrements and also how to use the toggle buttons in flutter 项目的数量

 body:
    Column(
      children: <Widget>[
        Container(
          height: 100.0,
          child: Card(
            elevation: 1.0,
            child: ListView(
              padding: EdgeInsets.all(8.0),
              children: <Widget>[
                ListTile(
                    title: Text('AASHIRVAAD ATTA\n1Kg',
                        style: TextStyle(fontWeight: FontWeight.w500)),
                    subtitle: Text('¥ 3000',style: TextStyle(color: Colors.black),),
                    leading: Image.asset('images/atta.jpg',height:90.0,width:90.0,),
                  trailing: new Row(
                    children: <Widget>[
                      _itemCount!=0? new  IconButton(icon: new Icon(Icons.remove),onPressed: ()=>setState(()=>_itemCount--),):new Container(),
                      new Text(_itemCount.toString()),
                      new IconButton(icon: new Icon(Icons.add),onPressed: ()=>setState(()=>_itemCount++))
                    ],
                  )
                )
              ],
            ),
          ),
        )
      ],
    )

Answer 1

已更新

这是数据类

class ItemData {
  String itemName;
  String itemQuantity;
  Widget image;
  String price;
  bool isAdded = false;
  int itemCount = 0;

  ItemData(this.itemName, this.itemQuantity, this.price, this.image);
}

这是您的商品列表（暂时为虚拟列表）：

 List<ItemData> data = [
    ItemData(
        "AASHIRVAAD ATTA 1",
        "1Kg",
        "¥ 3000",
        Image.asset(
          'assets/support.png',
          width: 90,
          height: 90,
        )),
    ItemData(
        "AASHIRVAAD ATTA 2",
        "2Kg",
        "¥ 3001",
        Image.asset(
          'assets/support.png',
        )),
    ItemData(
        "AASHIRVAAD ATTA 3",
        "3Kg",
        "¥ 3002",
        Image.asset(
          'assets/support.png',
        )),
    ItemData(
        "AASHIRVAAD ATTA 4",
        "4Kg",
        "¥ 3003",
        Image.asset(
          'assets/support.png',
        )),
    ItemData(
        "AASHIRVAAD ATTA 5",
        "5Kg",
        "¥ 3004",
        Image.asset(
          'assets/support.png',
        )),
    ItemData(
        "AASHIRVAAD ATTA 6",
        "6Kg",
        "¥ 3005",
        Image.asset(
          'assets/support.png',
        ))
  ];

这是您设计的自定义ListTile：

Widget _listTime(int pos) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.greenAccent,
              child: data[pos].image,
            ),
            flex: 1,
          ),
          Padding(padding: const EdgeInsets.all(5.0)),
          Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('${data[pos].itemName}\n${data[pos].itemQuantity}',
                      style: TextStyle(fontWeight: FontWeight.w500)),
                  Text(
                    data[pos].price,
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              )),
          Expanded(
              child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(20.0),
                border: Border.all(color: Colors.yellow, width: 3.0)),
            padding: data[pos].isAdded
                ? const EdgeInsets.all(0.0)
                : const EdgeInsets.all(5.0),
            child: data[pos].isAdded
                ? Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        child: IconButton(
                          icon: new Icon(Icons.remove_circle_outline),
                          iconSize: 20,
                          onPressed: () => setState(() {
                                if (data[pos].itemCount != 0)
                                  data[pos].itemCount--;
                              }),
                        ),
                        flex: 1,
                      ),
                      Expanded(
                        child: Text(
                          '${data[pos].itemCount}',
                          textAlign: TextAlign.center,
                        ),
                        flex: 1,
                      ),
                      Expanded(
                          child: IconButton(
                              icon: new Icon(Icons.add_circle_outline),
                              padding: const EdgeInsets.all(0),
                              iconSize: 20,
                              onPressed: () =>
                                  setState(() => data[pos].itemCount++)),
                        flex: 1,
                      )
                    ],
                  )
                : InkWell(
                    onTap: () {
                      setState(() {
                        data[pos].isAdded = true;
                      });
                    },
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            'Add',
                            style: TextStyle(
                                fontWeight: FontWeight.w500,
                                color: Colors.yellow),
                          ),
                          Icon(
                            Icons.add_circle_outline,
                            color: Colors.yellow,
                          )
                        ],
                      ),
                    ),
                  ),
          ))
        ],
      ),
    );
  }

这是主体

body : Container(
      child: ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, pos) {
            return _listTime(pos);
          }),
    );

快乐编码：）

如何进行设计以及如何针对颤振中的特定项目进行递增和递减

1 个答案: