如何在颤动中增加和减少特定产品

Question

我正在开发一个送餐应用程序，我试图为列表中的特定产品制作递增递减系统。一开始它工作 i.e the counter increases 但在计数器自动 return 到 0 之后一点点没有按下任何按钮。我不知道为什么会这样

下面是我正在尝试的代码

这是class

class ItemData {
  final String itemName;
  final String itemPrice;
  final String image;
  int counter = 0;
  bool isAdded = false;
  ItemData({this.itemName, this.itemPrice, this.image});
}

这是从url

获取数据的函数

  Future<List<ItemData>> _getProducts() async {
    var data = await http
        .get("https://orangecitycafe.in/app_configs/products_display.php");

    var jsonData = json.decode(data.body);
    List<ItemData> details = [];
    for (var p in jsonData) {
      ItemData detail = ItemData(
          itemName: p["product_name"],
          itemPrice: p["product_price"],
          image: p["product_image"]);
      details.add(detail);
    }
    return details;
  }

这是未来构建器中获取产品的代码

  Widget _myCart() {
    return FutureBuilder(
      future: _getProfile(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(snapshot.data[index].itemName),
                leading: Image.network("https://www.orangecitycafe.in/" +
                    snapshot.data[index].image),
                trailing: snapshot.data[index].isAdded
                    ? Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () {
                              setState(() {
                                if (snapshot.data[index].counter > 0) {
                                  snapshot.data[index].counter--;
                                }
                              });
                            },
                            color: Colors.green,
                          ),
                          Text(snapshot.data[index].counter.toString()),
                          IconButton(
                            icon: Icon(Icons.add),
                            color: Colors.green,
                            onPressed: () {
                              setState(() {
                                snapshot.data[index].counter++;
                              });
                            },
                          ),
                        ],
                      )
                    : RaisedButton(
                      onPressed: (){
                        setState(() {
                          snapshot.data[index].isAdded = true;
                        });
                      },
                      child: Text("Add"),
                    ),
              );
            },
          );
        } else {
          return Container();
        }
      },
    );
  }

其余的工作正常，但只有当我增加计数器时它才会增加，一段时间后它会自动 returns 到 0

Answer 1

您可以复制粘贴运行下面的完整代码
您可以通过以下方式在FutureBuilder中使用Future来避免setState导致FutureBuilder再次重建。
详细原因 https://github.com/flutter/flutter/issues/11426#issuecomment-414047398
每次发出重建时，都会调用 FutureBuilder 状态的 didUpdateWidget。此函数检查旧的 future 对象是否与新的不同，如果不同，则重新触发 FutureBuilder.

为了解决这个问题，我们可以在构建函数之外的其他地方调用 Future。比如在initState中，将它保存在一个成员变量中，并将这个变量传递给FutureBuilder.

代码片段

Future<List<ItemData>> _future;
...
@override
  void initState() {
    _future = _getProducts();
    super.initState();
  }
...
  Widget _myCart() {
    return FutureBuilder(
      future: _future,

工作演示

完整代码

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

class ItemData {
  final String itemName;
  final String itemPrice;
  final String image;
  int counter = 0;
  bool isAdded = false;
  ItemData({this.itemName, this.itemPrice, this.image});
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<List<ItemData>> _future;

  Future<List<ItemData>> _getProducts() async {
    var data = await http
        .get("https://orangecitycafe.in/app_configs/products_display.php");

    var jsonData = json.decode(data.body);
    List<ItemData> details = [];
    for (var p in jsonData) {
      ItemData detail = ItemData(
          itemName: p["product_name"],
          itemPrice: p["product_price"],
          image: p["product_image"]);
      details.add(detail);
    }
    return details;
  }

  @override
  void initState() {
    _future = _getProducts();
    super.initState();
  }

  Widget _myCart() {
    return FutureBuilder(
      future: _future,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(snapshot.data[index].itemName),
                leading: Image.network("https://www.orangecitycafe.in/" +
                    snapshot.data[index].image),
                trailing: snapshot.data[index].isAdded
                    ? Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () {
                              setState(() {
                                if (snapshot.data[index].counter > 0) {
                                  snapshot.data[index].counter--;
                                }
                              });
                            },
                            color: Colors.green,
                          ),
                          Text(snapshot.data[index].counter.toString()),
                          IconButton(
                            icon: Icon(Icons.add),
                            color: Colors.green,
                            onPressed: () {
                              setState(() {
                                snapshot.data[index].counter++;
                              });
                            },
                          ),
                        ],
                      )
                    : RaisedButton(
                        onPressed: () {
                          setState(() {
                            snapshot.data[index].isAdded = true;
                          });
                        },
                        child: Text("Add"),
                      ),
              );
            },
          );
        } else {
          return Container();
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: _myCart());
  }
}

如何在颤动中增加和减少特定产品

How to do incrementing and decrementing of a particular product in flutter

counter

flutter