Flutter购物车数量无法增加，点击+号报UnsupportedError错误

问题详情 #

点击购物车“+”按钮尝试增加商品数量时操作失败，触发以下错误：

========= Exception caught by gesture ===============================================================
The following UnsupportedError was thrown while handling a gesture:
Unsupported operation: indexed set

购物车布局截图：

目前购物车数量仅显示初始值1，触发手势操作时出现上述错误。

相关代码 #

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: ListView.builder(
      itemCount: value.hotelcart.length,
      padding: EdgeInsets.all(12),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(12.0),
          // child:
          // Visibility(
           // visible: value.hotelcart[index][4] >= 0,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(8)),
            child: ListTile(
              leading: Image.asset(
                value.hotelcart[index][2],
                height: 100,
              ),
              title: Text(
                value.hotelcart[index][0],
                style: const TextStyle(fontSize: 18),
              ),
              subtitle: Text(
                'Rs ' + value.hotelcart[index][1],
                style: const TextStyle(fontSize: 12),
              ),
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.add),
                    onPressed: (){
                      setState(()
                      {
                        value.hotelcart[index][4]++;
                      });
                    }, 
                  ),
                  Text(value.hotelcart[index][4].toString(),),
                  IconButton(
                    icon: Icon(Icons.remove),
                    onPressed: () =>
                        Provider.of<hotelItem>(context, listen: false)
                            .removeItemFromCart(index),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    ),
  ),
),

原因分析 #

• Unsupported operation: indexed set错误说明value.hotelcart[index]是不可变列表，这类列表不允许直接修改内部元素值。
• 直接在setState中修改Provider管理的状态，不符合状态管理规范，也容易引发数据不一致问题。

解决方案 #

1. 在hotelItem类中添加数量更新方法 #

修改你的Provider类，通过方法来处理数量增加逻辑，确保状态更新的合法性：

class hotelItem extends ChangeNotifier {
  // 确保hotelcart是可变列表，避免用List.unmodifiable初始化
  List<List<dynamic>> hotelcart = [];

  // 新增：增加商品数量的方法
  void increaseItemQuantity(int index) {
    // 将不可变列表转为可变列表后修改
    List<dynamic> updatedItem = List.from(hotelcart[index]);
    updatedItem[4] = (updatedItem[4] as int) + 1;
    hotelcart[index] = updatedItem;
    notifyListeners(); // 通知UI刷新
  }

  // 保留原有的删除方法
  void removeItemFromCart(int index) {
    // 原删除逻辑...
    notifyListeners();
  }
}

2. 修改UI层的按钮点击事件 #

不再直接操作状态，转而调用Provider提供的方法：

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    Provider.of<hotelItem>(context, listen: false)
        .increaseItemQuantity(index);
  },
),

3. 确保购物车列表为可变类型 #

检查hotelItem中hotelcart的初始化方式，避免使用不可变列表：

// 错误示例（不可变）
hotelcart = List.unmodifiable([...]);
// 正确示例（可变）
hotelcart = [...]; // 或使用List.generate等方式创建可变列表

额外建议 #

• 不要用嵌套列表存储购物车项，建议创建CartItem实体类（包含name、price、imagePath、quantity等字段），提升代码可读性和可维护性。
• 所有状态修改操作都通过Provider的方法完成，避免直接操作状态变量。

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