Flutter StatefulWidget商品页选0元饮品/附加项总价异常问题求助

• 核心错误1：计算选中饮品/附加项费用的逻辑错误：在遍历所有选项更新选中状态时，每遍历一个选项就更新一次费用，遍历结束后费用被覆盖为列表最后一个选项的价格乘以数量，和你实际选中的选项完全无关，所以点击0元选项时如果列表最后一个选项价格不为0，总费用就会异常上涨。
• 核心错误2：状态变量（购买数量、各项费用等）放在了StatefulWidget类中，不符合Flutter开发规范，StatefulWidget作为不可变的配置类不应该存放可变状态，后续页面重绘/热重载时可能出现状态丢失问题。

步骤1：调整状态变量存储位置 #

将所有可变状态从ProductDetails Widget类移到ProductDetailsState类中：

class ProductDetails extends StatefulWidget {
  // 只保留不可变的传入配置参数
  final Product product;
  const ProductDetails({super.key, required this.product});

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

class ProductDetailsState extends State<ProductDetails>{
  // 所有可变状态移到这里
  int amount=0;
  double productcost=0;
  double drinkcost = 0;
  double addoncost = 0;
  double totalcost = 0;

  @override
  Widget build(BuildContext context) {
    // 原有build逻辑不变
  }
}

步骤2：修复饮品点击逻辑 #

将饮品列表的点击事件修改为：先更新所有选项的选中状态，再用实际点击的选中项计算费用，不要在遍历过程中更新费用：

onTap: (){
  setState(() {
    // 遍历更新所有饮品的选中状态
    for (var drink in widget.product.drinks) {
      drink.isSelected = drink == widget.product.drinks[index];
    }
    // 直接用当前点击的选中项计算饮品费用
    drinkcost = widget.product.drinks[index].drinkprice * amount;
    // 重新计算总价
    totalcost = productcost + drinkcost + addoncost;
  });
},

步骤3：修复附加项点击逻辑 #

附加项的点击逻辑和饮品逻辑保持一致，做对应修改即可：

onTap: (){
  setState(() {
    // 遍历更新所有附加项的选中状态
    for (var addon in widget.product.addons) {
      addon.isSelected = addon == widget.product.addons[index];
    }
    // 直接用当前点击的选中项计算附加项费用
    addoncost = widget.product.addons[index].addonprice * amount;
    // 重新计算总价
    totalcost = productcost + drinkcost + addoncost;
  });
},

步骤4：同步修改计数器逻辑 #

将计数器加减逻辑中所有调用widget.xxx状态的地方，改为直接调用State类中存储的状态变量即可。

修改完成后点击0元的饮品/附加项时，费用会按选中项的实际价格计算，不会再出现异常上涨的问题。

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