使用 Flutter 和 Dart 实现多个过滤器答案

【问题标题】：Implement multiple filters using Flutter and Dart使用 Flutter 和 Dart 实现多个过滤器
【发布时间】：2020-12-28 14:06:05
【问题描述】：

我有一个列表，比如说“ProductList”

我有一个带有“颜色”和“形状”倾斜的过滤器栏，带有红色、绿色、方形和圆形的切换按钮。

颜色：红绿

形状：方圆

第一类 - 颜色

如果我点击红色，'ProductList' 必须过滤为红色。

firstFilteredList = ProductList.where((p) => p.color == "red");

现在如果我点击绿色，“ProductList”必须过滤为红色和绿色。

firstFilteredList = ProductList.where((p) => p.color == "red" || p.color == "green");

第二类 - 形状

现在，如果我单击方形，则必须将“firstFilteredList”过滤为方形。

secondFilteredList = firstFilteredList.where((p) => p.shape == "square");

现在，如果我单击圆形，则必须将“firstFilteredList”过滤为方形和圆形。

secondFilteredList = firstFilteredList.where((p) => p.shape == "square" || p.shape == "round");

如果按钮处于关闭状态，我需要删除这些过滤器。

为了简单起见，我刚刚提到了两个过滤器类别 - 颜色和形状。可能有 6-7 个过滤器类别。因此，解决方案必须具有可扩展性。

谁能帮我解决这个问题？

编辑： ProductList 是 CategorizedProduct 的一个元素。我必须返回列表。

class CategorizedProduct {
  String id;
  String title;
  List<Product> product;
  String selectedVariant;
}

class Product {
  String color;
  String id;
  bool shapeRectangle;
  bool shapeRound;
  bool shapeSquare;
}

【问题讨论】：

这是一种复选框。因此用户可以从列表中选择任意数量的形状和颜色。是吗？
@Rajesh 是的....
@pskink 你能详细说明一下吗？我无法理解。
您现在有任何代码吗？如果有，请出示
显示您的 ProductList 类....帮助我们帮助您

标签： flutter dart

【解决方案1】：

您可以将查询放在列表中而不是执行contains()。

这是一个 Dart 示例。

enum ProductColor { RED, GREEN, BLUE }

enum Weight { HEAVY, NORMAL, LIGHT }

enum Shape { SQUARE, ROUND, TRIANGLE }

class Product {
  final String name;
  final ProductColor color;
  final Weight weight;
  final Shape shape;
  Product(this.name, this.color, this.weight, this.shape);
  @override
  String toString() {
    return '$name $color $weight $shape';
  }
}

class Query {
  final List<ProductColor> color;
  final List<Weight> weight;
  final List<Shape> shape;

  Query({this.color, this.weight, this.shape});
}

List<Product> filter(List<Product> products, Query query) {
  return products
      .where((product) =>
          (query.color == null || query.color.contains(product.color)) &&
          (query.weight == null || query.weight.contains(product.weight)) &&
          (query.shape == null || query.shape.contains(product.shape)))
      .toList();
}

void main() {
  List<Product> _productList = [
    Product("P1", ProductColor.BLUE, Weight.HEAVY, Shape.TRIANGLE),
    Product("P2", ProductColor.GREEN, Weight.NORMAL, Shape.ROUND),
    Product("P3", ProductColor.RED, Weight.LIGHT, Shape.ROUND),
    Product("P4", ProductColor.GREEN, Weight.NORMAL, Shape.SQUARE),
  ];

  Query _query = Query(color: [ProductColor.GREEN], shape: [Shape.ROUND]);

  List<Product> results = filter(_productList, _query);
  results.forEach(print);
}

【讨论】：

【解决方案2】：

您希望使用onPressed() 来选择过滤器，并使用布尔值表示打开或关闭（选择或不选择过滤器）。像这样的：

//red color filter button 
...
onPressed(
  redFilter = !redFilter; //on if off, off if on...
)

然后你可以使用一个布尔列表

bool redFilter = false; 
bool greenFilter = false;
bool squareFilter = false;
bool roundFilter = false;

List<bool> filters = [redFilter, greenFilter, squareFilter, roundFilter];

【讨论】：