Flutter中使用Provider修改列表内ListItem的timesChosen值报错求助

错误原因 #

你遇到的Class 'ListItem' has no instance setter 'timesChosen='错误，是因为ListItem类中的timesChosen字段被声明为final（不可变），无法直接通过赋值或自增操作修改它的值。

解决方案 #

根据你的需求，有两种常见的处理方式：

方式1：将timesChosen改为可修改变量

直接去掉timesChosen字段的final修饰符，让它成为可赋值的变量：

class ListItem {
  int cost1;
  int cost2;
  int canSelect;
  int timesChosen; // 移除final，允许直接修改
  String name;

  ListItem({
    required this.cost1,
    required this.cost2,
    required this.canSelect,
    required this.timesChosen,
    required this.name,
  });
}

然后在MyProvider中添加修改方法并触发通知：

class MyProvider extends ChangeNotifier {
  List<ListItem> _myList = [
    ListItem(cost1: 2, cost2: 0, canSelect: 1, timesChosen: 0, name: 'Item 1'),
  ];

  List<ListItem> get MyList => _myList;

  void incrementTimesChosen(int index) {
    _myList[index].timesChosen++;
    notifyListeners(); // 通知UI更新
  }
}

最后修改UI层的点击事件：

ListView.builder(
  itemBuilder: (context, index) {
    final item = context.watch<MyProvider>().MyList[index];
    return InkWell(
      onTap: () {
        context.read<MyProvider>().incrementTimesChosen(index);
      },
      child: EquipmentButton(
        text: item.name,
        Cost1: '${item.cost1}',
        timesChosen: '${item.timesChosen}',
      ),
    );
  },
  itemCount: context.watch<MyProvider>().MyList.length,
),

方式2：保持ListItem不可变，使用copyWith方法（推荐）

这种方式更符合Flutter状态管理的最佳实践，避免直接修改对象：

class ListItem {
  final int cost1;
  final int cost2;
  final int canSelect;
  final int timesChosen;
  final String name;

  ListItem({
    required this.cost1,
    required this.cost2,
    required this.canSelect,
    required this.timesChosen,
    required this.name,
  });

  // 生成新的ListItem对象，仅修改指定字段
  ListItem copyWith({
    int? cost1,
    int? cost2,
    int? canSelect,
    int? timesChosen,
    String? name,
  }) {
    return ListItem(
      cost1: cost1 ?? this.cost1,
      cost2: cost2 ?? this.cost2,
      canSelect: canSelect ?? this.canSelect,
      timesChosen: timesChosen ?? this.timesChosen,
      name: name ?? this.name,
    );
  }
}

修改MyProvider的更新方法：

class MyProvider extends ChangeNotifier {
  List<ListItem> _myList = [
    ListItem(cost1: 2, cost2: 0, canSelect: 1, timesChosen: 0, name: 'Item 1'),
  ];

  List<ListItem> get MyList => _myList;

  void incrementTimesChosen(int index) {
    // 创建新的ListItem对象，更新timesChosen
    final updatedItem = _myList[index].copyWith(timesChosen: _myList[index].timesChosen + 1);
    // 创建新的列表替换原列表（保证不可变性）
    _myList = List.from(_myList)..[index] = updatedItem;
    notifyListeners();
  }
}

UI层的修改和方式1一致，调用incrementTimesChosen方法即可。

额外注意 #

• 使用context.watch<MyProvider>()监听列表变化，确保UI能自动刷新；
• 不要在UI层直接修改Provider中的数据，通过Provider提供的方法操作，才能正确触发notifyListeners()。

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