Flutter开发：如何实现List内两个匹配元素同时删除功能

实现按钮点击交互时需要满足以下规则，原for循环实现运行效果不符合预期：

• 首次点击按钮：将按钮对应的名称添加到List集合中
• 再次点击同一按钮：先向List中添加一次该名称，若此时集合内存在2个完全相同的匹配名称，将这两个相同元素全部删除

原有功能函数逻辑存在3个核心错误：

1. 未做数量判断，每次点击添加元素后，只要遍历到匹配项就直接删除所有同类型元素，完全不符合「凑齐2个相同项才触发删除」的规则
2. 遍历List集合的过程中调用removeWhere修改集合本身，会触发并发修改异常，导致遍历逻辑混乱
3. 集合数据状态和按钮选中状态reportsList没有做对齐，容易出现UI显示和实际数据不一致的问题

原功能函数代码：

List<String> types = [];

void reportButton(int number, String type) {
    reportsList[number] = !reportsList[number];
    if (reportsList.contains(true)) {
      isEnabledC = true;
    } else {
      isEnabledC = false;
    }

    types.add(type);

    for (var element in types) {
      if (element == type) {
        types.removeWhere((element) => element == type);
      }
    }
}

原按钮组件代码：

SizedBox(
  width: size.width / 3,
  child: GestureDetector(
    onTap: () {
      cubit.reportButton(0, 'comment');
    },
    child: ReportButton(
      enabled: state.reports[0],
      svg: constants.Assets.comment,
      text: 'Comment',
    ),
  ),
),
SizedBox(
  width: size.width / 3,
  child: GestureDetector(
    onTap: () {
      cubit.reportButton(1, 'broken');
    },
    child: ReportButton(
      enabled: state.reports[1],
      svg: constants.Assets.attention,
      text: 'Broken station',
    ),
  ),
),

直接替换reportButton方法即可，按钮组件代码无需调整：

List<String> types = [];

void reportButton(int number, String type) {
  // 切换按钮选中态
  reportsList[number] = !reportsList[number];
  // 更新提交按钮可用状态
  isEnabledC = reportsList.contains(true);

  // 先统计当前集合内目标type的已有数量
  final currentTypeCount = types.where((e) => e == type).length;

  if (currentTypeCount == 0) {
    // 首次点击，集合内无对应元素，直接添加
    types.add(type);
  } else if (currentTypeCount == 1) {
    // 第二次点击，先添加元素凑齐2个相同项，再删除所有匹配的该元素
    types.add(type);
    types.removeWhere((e) => e == type);
  }
}

逻辑说明 #

• 严格匹配需求规则：首次点击添加1个元素，第二次点击先补1个元素凑成2个相同项，再清空所有同类型元素，回到初始未选中状态
• 先统计数量再做增删操作，避免了遍历过程中修改集合导致的并发修改异常，逻辑稳定
• 集合数据和按钮选中状态完全同步，不会出现UI和数据错位的问题

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