Flutter中购物车数量更新成功但界面未同步显示问题求助

API调用与数量更新操作已成功完成，但界面无法显示更新后的购物车数量，以下是问题分析和修复方案：

现有代码问题点 #

1. 仅更新了局部变量qty，未同步修改cartProduct_list中对应商品的quantity，导致下拉框的value始终读取旧数据
2. 调用getCart获取最新购物车后，直接执行cartProduct_list.add(product)，导致列表中堆积旧的购物车数据，界面无法展示新数据

修复后的代码 #

Builder中的qty赋值（无需修改） #

int qty = int.parse(cartProduct_list[0].products![index].quantity.toString());

数量更新代码（修复版） #

Row(
  children: [
    Text("数量："),
    DropdownButton(
      isDense: true,
      hint: Text("选择数量"),
      value: int.parse(cartProduct_list[0].products![index].quantity.toString()),
      onChanged: (value)  {
        // 先同步更新列表中对应商品的数量，触发UI临时刷新
        setState(() {
          cartProduct_list[0].products![index].quantity = value.toString();
          qty = value!;
        });
        print(qty);

        isload = true;
        _cartController.updateQty(
          email.toString(),
          sessionData.toString(),
          cartProduct_list[0].products![index].productId.toString(),
          qty!
        ).then( (value) async {
          if(value == 200) {
            SharedPreferences prefs = await SharedPreferences.getInstance();
            sessionData = prefs.getString('sessionData');
            email = prefs.getString('username_controller');

            _cartController.getCart(email!, sessionData!).then((product) {
              setState(() {
                // 替换列表内容，用最新购物车数据覆盖旧数据
                cartProduct_list.clear();
                cartProduct_list.add(product);
                isload = false;
              });
            }); 
          } else {
            // 更新失败时恢复旧数量
            setState(() {
              cartProduct_list[0].products![index].quantity = qty.toString();
              isload = false;
            });
          }
        }).catchError((error) {
          // 请求异常时恢复旧数量并结束加载
          setState(() {
            cartProduct_list[0].products![index].quantity = qty.toString();
            isload = false;
          });
        });
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("购物车已成功更新"))
        );
      },
      items: _createList()
    ),
  ],
),

修复说明 #

• 同步更新本地列表：选择新数量后立即修改cartProduct_list中对应商品的quantity，确保下拉框实时显示选中的新数量
• 替换购物车数据：获取最新购物车数据后，先清空旧列表再添加新数据，避免旧数据残留导致界面展示异常
• 异常处理：添加失败和异常捕获逻辑，防止请求出错后界面停留在错误状态

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