使用Provider实现购物车结算总价显示遇阻，求解决方案

问题分析与修复方案 #

1. 补充Food类的总价计算逻辑 #

你的Food类缺少单商品总价的计算逻辑，直接使用order.totalPrice会报错。添加计算属性来获取单种商品的总价：

class Food {
  String imgUrl;
  String desc;
  String name;
  String waitTime;
  num score;
  int price;
  int quantity;
  List<Map<String, String>> ingredients;
  String about;
  bool highlight;
  Food(this.imgUrl, this.desc, this.name, this.waitTime, this.score, this.price,
      this.quantity, this.ingredients, this.about,
      {this.highlight = false});

  // 新增计算属性：单商品总价=单价×数量
  int get totalPrice => price * quantity;
}

2. 修正Provider类的总价更新逻辑 #

原TotalPrice类中，totalPrice()方法创建了局部变量，未更新类成员ordersTotalPrice，导致UI始终读取初始值0。修改为主动更新成员变量的方法：

class TotalPrice with ChangeNotifier {
  int ordersTotalPrice = 0;

  // 传入购物车列表，计算并更新总价
  void updateTotalPrice(List<Food> userOrders) {
    ordersTotalPrice = userOrders.fold(0, (sum, order) => sum + order.totalPrice);
    notifyListeners(); // 通知UI刷新
  }
}

3. 购物车变化时触发总价更新 #

在添加商品、删除商品、修改商品数量的操作后，调用updateTotalPrice方法同步总价：

// 示例：添加商品到购物车后
userOrders.add(newFood);
Provider.of<TotalPrice>(context, listen: false).updateTotalPrice(userOrders);

// 示例：修改商品数量后
targetFood.quantity = newQuantity;
Provider.of<TotalPrice>(context, listen: false).updateTotalPrice(userOrders);

4. 结算按钮正确监听总价 #

确保Provider已在全局注册（如MaterialApp外层用ChangeNotifierProvider包裹），然后在按钮中监听更新后的总价：

class _NextButtonState extends State<NextButton> {
  String getCurrency() {
    var format = NumberFormat.simpleCurrency(name: 'NGN');
    return format.currencySymbol;
  }

  @override
  Widget build(BuildContext context) {
    final totalPrice = context.watch<TotalPrice>().ordersTotalPrice;
    return userOrders.isNotEmpty
        ? Container(
            color: Colors.transparent,
            padding: const EdgeInsets.fromLTRB(10.0, 10.0, 5.0, 5.0),
            height: 60,
            width: double.infinity,
            child: ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: const BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
              child: Text(
                '${getCurrency()}$totalPrice',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
              onPressed: () {},
            ),
          )
        : const Text('');
  }
}

5. 全局注册Provider #

在主入口完成Provider注册，确保所有子Widget都能访问：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TotalPrice(),
      child: const MyApp(),
    ),
  );
}

内容的提问来源于stack exchange，提问作者shimomaru