在 flutter/dart 应用程序中更新购物车总数的问题

Question

我正在为我的电子商务应用程序制作一个购物车页面，当我尝试在调试控制台上打印出购物车中的商品总数时，即使在增加/减少商品数量后，它也会打印出预期结果，但是在用户界面中，当我单击减少/增加数量按钮时，总量不会相应更新。例如，假设我的商品总计为 2222 美元，总计将显示该数字，但是当将商品数量增加到 2 时，即使商品数量发生了变化，也没有任何反应，然后当我单击它后，总金额会更新这次但是计算会错误，因为当该项目的数量为 2 时，它没有计算总数。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:watch_hub/models/cart.dart';
import 'package:watch_hub/services/database.dart';

class GetPrice {
//I USE THIS STATIC VARIABLE TO ASSIGN THE TOTAL TO IT AND DISPLAY IN THE CART PAGE
  static num price = 0;
}

class CartList extends StatefulWidget {
  const CartList({super.key});

  @override
  State<CartList> createState() => _CartListState();
}

class _CartListState extends State<CartList> {
  int? counter;
  static int? price;
  @override
  Widget build(BuildContext context) {
    final cart = Provider.of<List<Cart>>(context);
    double maxWidth = MediaQuery.sizeOf(context).width;

    List totalPriceList = [];
  
    // cart.sort();

    cart.forEach((cart) {
      print("cart model is ${cart.brand}");
    });

    return Scaffold(
      appBar: AppBar(
        title: Text("Cart"),
      ),
      body: ListView.builder(
        itemCount: cart.length,
        itemBuilder: (
          context,
          index,
        ) {
          int? price;
          int? initialQuantity = cart[index].quantity;
          GetPrice.quantity = cart[index].quantity;
          totalPriceList.add(cart[index].price! * cart[index].quantity!);

          totalPriceList.reduce((value, element) {
            GetPrice.price = element + value;
          });

       //WHEN I PRINT THIS I GET THE EXPECTED RESULT EVEN AFTER CHANGING QUANTITIES IT OUTPUTS THE CORRECT RESULT EVERYTIME
          print("total is ${GetPrice.price.toString()}");

          return Column(
            children: [
              Container(
                // height: 50,
                child: ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(
                        cart[index].image!,
                      ),
                    ),
                    title: Text(
                      cart[index].model!,
                      style: TextStyle(fontSize: 20),
                    ),
                    subtitle: Text(
                      cart[index].brand!,
                      style: TextStyle(fontSize: 20),
                    ),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton.filled(
                          style:
                              IconButton.styleFrom(backgroundColor: Colors.red),
                          onPressed: () {
                            setState(() {
                              cart[index].quantity = cart[index].quantity! - 1;
                            });
                          },
                          icon: Icon(Icons.remove),
                        ),
                        Column(
                          children: [
                            Text(
                              cart[index].price.toString(),
                              style: TextStyle(fontSize: 20),
                            ),
                            Text(
                              "QTY: ${cart[index].quantity.toString()}",
                              style: TextStyle(fontSize: 16),
                            )
                          ],
                        ),
                        IconButton.filled(
                          style: IconButton.styleFrom(
                              backgroundColor: Colors.green),
                          onPressed: () {
                            setState(() {
                              cart[index].quantity = cart[index].quantity! + 1;
                           
                            });
                            // print("total is $price");
                          },
                          icon: Icon(Icons.add),
                        ),
                      ],
                    )),
              ),
            ],
          );
        },
      ),
      bottomSheet: Container(
        height: 130,
        color: Colors.brown[400],
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    "Total ",
                    style: TextStyle(fontSize: 25, color: Colors.white),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8.0),
                //THIS IS WHERE I DISPLAY THE TOTAL IN THE CART PAGE
                  child: Text(
                    "\$${GetPrice.price.toString()}",
                    style: const TextStyle(fontSize: 25, color: Colors.white),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 200,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Text("Make Order"),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

主要问题是这一行

final cart = Provider.of<List<Cart>>(context);

它位于构建函数内部，因此它将重置为提供者发送到此小部件的任何内容。当您点击绿色或红色按钮时，它将触发小部件的重新构建，这将重置为原始购物车信息。

所以解决这个问题的最好方法是使用提供者和消费者设计模式。例如，这个例子与您的非常相似。它甚至还设置了一个购物车！ https://docs.flutter.dev/data-and-backend/state-mgmt/simple#changenotifier

但是注意，需要使用ChangeNotifier和Consumer。 您的消费者将是 CartList，而您的 ChangeNotifier 是发送购物车列表的类。 如果您仅显示数据，但您也在更改数据，因此您的 ChangeNotifier 也需要被告知更改数据，那么使用

Provider.of<List<Cart>>(context)

是有意义的。

我鼓励您按照示例进行操作，如果您遇到困难，请发布另一个问题。