Flutter中List列表结合FilterChip实现多条件组合筛选问题

你遇到的多筛选条件不生效的问题，是以下两处逻辑错误共同导致的：

• applyFilter方法的筛选逻辑错误：当前方法使用多分支独立判断，只要任意一个筛选项为true就直接返回对应单条件的筛选结果，不会叠加后续的筛选条件，因此只会生效第一个命中的筛选项。
• FilterChip的交互逻辑错误：当前所有FilterChip共用同一个_isSelected状态，且所有Chip的选中回调都只修改_snack变量，早餐、午餐、晚餐对应的筛选状态根本不会被正确更新。

1. 重写applyFilter方法，支持多条件叠加 #

默认实现「同时满足所有选中条件」的交集筛选效果，代码如下：

List<Meal> applyFilter(bool snack, bool breakfast, bool dinner, bool lunch) {
  return _meals.where((meal) {
    bool isMatch = true;
    if (breakfast) isMatch = isMatch && meal.isBreakfast;
    if (snack) isMatch = isMatch && meal.isSnack;
    if (dinner) isMatch = isMatch && meal.isDinner;
    if (lunch) isMatch = isMatch && meal.isLunch;
    return isMatch;
  }).toList();
}

如果需要的是「满足任意选中条件即可」的并集筛选效果，可改用以下逻辑：

List<Meal> applyFilter(bool snack, bool breakfast, bool dinner, bool lunch) {
  // 所有筛选项都未选中时返回全部餐食
  if (!snack && !breakfast && !dinner && !lunch) return _meals;
  return _meals.where((meal) {
    return (breakfast && meal.isBreakfast) ||
        (snack && meal.isSnack) ||
        (dinner && meal.isDinner) ||
        (lunch && meal.isLunch);
  }).toList();
}

2. 修正FilterChip的状态绑定逻辑 #

删掉无用的_isSelected变量，每个筛选类型的Chip单独绑定对应的状态变量，选中回调修改对应筛选项的值，示例代码如下：

// 早餐筛选Chip
FilterChip(
  label: const Text("早餐"),
  selected: _breakFast,
  backgroundColor: Colors.purple[50],
  selectedColor: customGreen,
  onSelected: (selected) {
    setState(() {
      _breakFast = selected;
    });
  },
),
// 零食筛选Chip
FilterChip(
  label: const Text("零食"),
  selected: _snack,
  backgroundColor: Colors.purple[50],
  selectedColor: customGreen,
  onSelected: (selected) {
    setState(() {
      _snack = selected;
    });
  },
),
// 午餐、晚餐的Chip按照上述逻辑同理实现，分别绑定_lunch、_dinner状态即可

修改完成后即可实现多筛选条件叠加生效的FilterChip效果。

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