Flutter中实现按压FilterChip时切换按钮颜色的问题

问题根源 #

• 你用单个布尔值filteredByTag控制所有标签的颜色，导致所有标签会同时变色，且无法切换回初始状态
• FilterChip的selected属性未设置，selectedColor只有在组件处于选中状态时才会生效，当前代码里FilterChip不知道自己是否被选中
• 没有为每个标签维护独立的选中状态，点击行为无法对应到单个标签的视觉变化

解决方案 #

1. 在父组件中用Set<String>记录选中的标签，实现每个标签状态独立可控
2. 给FilterChipCustom添加selected参数，传递给内部的FilterChip
3. 在onSelected回调中更新选中状态集合，并同步处理过滤逻辑

修改后的代码 #

父组件部分

// 父组件中新增状态变量
Set<String> selectedTags = {};

// 构建Wrap的代码修改为：
return SingleChildScrollView(
  child: Wrap(
    children: <Widget>[
      for (var tag in attributesFoundDistinct)
        FilterChipCustom(
          color: selectedTags.contains(tag) ? Colors.red : Colors.blue,
          label: tag,
          selected: selectedTags.contains(tag),
          onSelected: (value) {
            setState(() {
              // 更新选中标签集合
              if (value == true) {
                selectedTags.add(tag);
              } else {
                selectedTags.remove(tag);
              }
              // 处理列表过滤逻辑
              snapList = snapListAll;
              if (selectedTags.isNotEmpty) {
                _filteredDogList = snapList.where((dog) {
                  // 匹配任意选中的标签，可根据需求调整为匹配全部标签
                  return selectedTags.any((selectedTag) => 
                    dog[selectedTag].toLowerCase().contains(textControllerValue.toLowerCase())
                  );
                }).toList();
              } else {
                // 无选中标签时显示全部数据
                _filteredDogList = snapList;
              }
            });
          },
        ),
    ],
  ),
);

FilterChipCustom组件修改

class FilterChipCustom extends StatelessWidget {
  final String label;
  final Color color;
  final bool selected;
  final ValueChanged<bool?> onSelected;

  const FilterChipCustom({
    Key? key,
    required this.label,
    required this.color,
    required this.selected,
    required this.onSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      selected: selected, // 必须设置该属性，selectedColor才会生效
      selectedColor: color,
      labelPadding: const EdgeInsets.all(5.0),
      avatar: CircleAvatar(
        backgroundColor: Colors.grey.shade600,
        child: Text(label[0].toUpperCase()),
      ),
      label: Text(
        label,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
      onSelected: onSelected,
      backgroundColor: Colors.blue, // 未选中时的背景色，可根据需求调整
      elevation: 6.0,
      shadowColor: Colors.grey[60],
      padding: const EdgeInsets.all(6.0),
    );
  }
}

关键修改说明 #

• 用Set<String>替代单个布尔值，每个标签的选中状态独立存储，支持多标签选中/取消
• 给FilterChip添加selected参数，让组件明确自身选中状态，触发selectedColor的视觉变化
• 优化遍历逻辑，直接遍历标签列表更简洁易读
• 完善过滤逻辑，支持无选中标签时恢复显示全部数据

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