flutter - 如何在我的产品上创建添加减号按钮？

Question

我可以知道如何创建一个显示值并将按钮删除并添加到产品列表中的函数吗？我已经创建了一个用于删除和添加到屏幕的图标按钮，但我没有任何关于如何使用该按钮的线索。

应用程序图形用户界面：

我的目标是拥有这种按钮：

我的这个 GUI 的完整代码：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'CartList.dart';
import 'bottom_navi_iconW.dart';
import 'globals.dart' as globals;

class SarapanPagi extends StatefulWidget {
  final List list;
  final int index;
  final String category;
  SarapanPagi({this.index,this.list,this.category});


  @override
  _SarapanPagiState createState() => _SarapanPagiState();

}

class _SarapanPagiState extends State<SarapanPagi> {



  Future<List> getData() async{

    var url = 'http://10.0.2.2/foodsystem/breakfastlist.php';
    var data = {
      'product_type': globals.jenisCategory,
      'product_owner': widget.list[widget.index]['restaurant_id'],
    };
    var response = await http.post(url, body: json.encode(data));
    //final response= await http.get("http://10.0.2.2/foodsystem/getdata.php");
    return json.decode(response.body);}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            //Text("Restaurant's Owner Page"),
            Text(widget.list[widget.index]['restaurant_name'], textAlign: TextAlign.center, style: TextStyle(fontWeight: FontWeight.w700), ),
          ],
        ),
        centerTitle: false,
        //automaticallyImplyLeading: false,
      ),

      body:
      Padding(
        padding: const EdgeInsets.only(bottom: 0, left: 5, right: 5),
        child: Column(
          children: [
            /*FloatingActionButton(
              onPressed: (){
                return showDialog(
                  context: context,
                  builder: (context){
                    return AlertDialog(
                      content: Text(
                          globals.jenisCategory
                      ),
                    );
                  },
                );
              },
            ),*/
            //SizedBox(height: 30,),
            Container(
              //decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 4), borderRadius: BorderRadius.circular(15)),
              height: 627,
              child: FutureBuilder<List>(
                future: getData(),
                builder: (context, snapshot){
                  if(snapshot.hasError) print(snapshot.error);

                  return snapshot.hasData ?
                  ItemList(list: snapshot.data,) :
                  Center(child: CircularProgressIndicator(),);
                },
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar:
      Container(
        height: 70,
        color: Colors.red,
        child: BottomNavIcon(
          onTap: (){
            Navigator.of(context).push(new MaterialPageRoute(
                builder: (BuildContext context)=> new CartListItem()),);
          },
          image: "troli.png",
          name: "CART",
        ),
      ),
    );
  }
}

class ItemList extends StatelessWidget {



  final List list;
  ItemList({this.list});
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        //color: Colors.red.shade100,
        height: 627,
        child: ListView.builder(
          itemCount: list==null ? 0 : list.length,
          itemBuilder: (context, i){
            return new Container(
              //decoration: BoxDecoration(border: Border.all(color: Colors.blue, width: 4), borderRadius: BorderRadius.circular(15)),
              height: 250,
              child: new GestureDetector(
                onTap: (){},
                child: new Card(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(bottom : 5.0),
                            child: Text(list[i]["product_name"], textAlign: TextAlign.center, style: TextStyle(fontSize: 23, fontWeight: FontWeight.bold),),
                          ),
                          Row(
                            children: [
                              //Text(list[i]["product_name"], textAlign: TextAlign.center, style: TextStyle(fontSize: 30),),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Image.asset(
                                  "menulist/${list[i]['image']}",
                                  width: 150,
                                  height: 150,
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(left: 20.0, bottom: 0),
                                child:
                                Column(
                                  children: [
                                    //Text(list[i]["product_name"], textAlign: TextAlign.center, style: TextStyle(fontSize: 30),),
                                    Text("Price RM : ${list[i]["product_price"]}", textAlign: TextAlign.center, style: TextStyle(fontSize: 25),),
                                    Row(
                                      children: [
                                        IconButton(
                                            icon: Icon(Icons.remove),
                                            onPressed: (){},
                                            iconSize: 15,
                                        ),
                                        IconButton(
                                          icon: Icon(Icons.add),
                                          onPressed: (){},
                                          iconSize: 15,
                                        ),
                                      ],
                                    ),
                                    RaisedButton(
                                        shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(40.0)),
                                        color: Colors.red.shade300,
                                        child: Text("Add to Cart", style: TextStyle(fontWeight: FontWeight.bold),),
                                        onPressed: (){},
                                    )
                                  ],

                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                      /*ListTile(
                        title: Text(list[i]["product_name"], textAlign: TextAlign.center, style: TextStyle(fontSize: 30),),
                        leading:
                        Image.asset(
                          "images/${list[i]['image']}",
                          width: 100,
                          height: 100,
                        ),
                        subtitle: Text("Price RM : ${list[i]["product_price"]}", textAlign: TextAlign.center, style: TextStyle(fontSize: 25),),
                      ),*/
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

标签： flutter

Answer 1

首先，您需要将其更改为 StatefulWidget，因为 UI 交互已呈现（更改价格）。然后像

onPressed: () => setState(() => list[i]["product_price"] += unitprice),

会做