Flutter FilterChip选中状态未同步及副作用问题求助

问题分析 #

你的代码存在两个核心问题，导致点击下方芯片后上方原芯片状态无法同步更新：

1. 下方FilterChip的selected属性使用了dummyData[index]['isSelected']，这里的index是filters列表的索引，和dummyData的索引完全不对应，会错误修改dummyData里无关元素的状态。
2. 下方芯片的onSelected逻辑逻辑混乱：点击下方芯片的预期是取消选择，却用了if (selected)的判断，且更新原芯片状态时找错了对应元素。

修复代码 #

替换你原来的下方Wrap代码为以下内容：

Wrap(
  spacing: 10,
  runSpacing: 2,
  children: List.generate(filters.length, (index) {
    final filteredItem = filters[index];
    // 通过text字段匹配，找到该元素在dummyData中的真实索引
    final dummyIndex = dummyData.indexWhere((item) => item['text'] == filteredItem['text']);
    return FilterChip(
      showCheckmark: false,
      padding: EdgeInsets.all(2),
      label: Text(filteredItem['text']),
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Color(0xFF989394).withOpacity(0.33),
          width: 1.0,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      // 绑定原芯片的选中状态
      selected: dummyIndex != -1 ? dummyData[dummyIndex]['isSelected'] : false,
      onSelected: (bool selected) {
        setState(() {
          if (dummyIndex != -1) {
            // 同步更新原芯片的选中状态为未选中
            dummyData[dummyIndex]['isSelected'] = false;
            // 从筛选列表中移除该元素
            filters.remove(filteredItem);
          }
        });
      },
    );
  }),
)

额外优化建议 #

如果担心text字段可能出现重复，可以给dummyData里的每个元素添加唯一id字段（比如{'id': 1, 'text': 'Charming', ...}），然后用id来匹配索引，这样比用text更可靠。

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