如何在 Flutter 中设计 Filter？

Question

我是 flutter 的新手，我想知道如何在 flutter 中开发过滤器，比如 this（截取自 google 图片），所以我只想知道如何在flutter，有没有类似插件或特殊小部件的东西？如果您提供任何参考或代码或任何教程将对我提前 learn.ThankYou 有所帮助。

Answer 1

你需要把它分解成几部分。

首先是您的 UI：这些只是标准的 Flutter Widget。你想让用户向上滑动它吗？弄清楚如何通过向上滑动来显示小部件。你想让它出现在警报弹出窗口中吗？弄清楚如何弹出警报。过滤器 UI 与任何其他 UI 没有区别 - 因此您可以查找并提出一般性 UI 问题。

其次是您如何实施模型。它可以是一些简单的东西，比如一个 Provider，它包含您获取的 Items 列表；然后每个过滤器将更多 where 条件添加到您的列表中。

类似于：

var items=<Item>[]; // somehow you would fetch the initial list of items
var filtered;


void addColorFilter(Color color) {
  filtered=filtered??items;
  filtered=filtered.where( (element) => element.color==color);
  notifyListeners();
}


void addSizeFilter(String size) {
  filtered=filtered??items;
  filtered=filtered.where( (element) => element.size==size);
  notifyListeners();
}

void removeFilters() => filtered=null;

void getFiltered() => filtered??items;

然后您可以在 ListView.builder() 中使用 filtered 迭代器来仅显示过滤后的项目。

在这里回答您的后续问题：

您混合了 'AND' 和 'OR' 条件。如果您只是像上面那样继续添加迭代器，您将无法显示 2 种尺寸（M 和 S）——因为没有项目同时是 M 和 S。在这种情况下，如果有多项选择过滤器，您将需要为每个可以有多个选择的过滤器类型添加额外的列表。而且您将不得不重建整个过滤器。

这可能是一个很好的起点 - 对于您的价格和尺码示例：

var items=<Item>[]; // somehow you would fetch the initial list of items
Iterator? filtered;

double? lowPrice;
void addLowPrice(double price) {
  lowPrice=price;
  rebuildFilter();
}

double? highPrice;
void addHighPrice(double price) {
  highPrice=price;
  rebuildFilter();
}

var sizeOptions=<String>[];
void addSizeFilter(String size) {
  sizeOptions.add(size);
  reubuildFilter();
}

void rebuildFilter() {

  filtered=items.where((e) => e.price >= lowPrice??0 && e.price <= highPrice&&double.infinity).where((e) => sizeOptions.isEmpty || sizeOptions.contains(e));
  
  notifyListeners();
}

void removeFilters() {
  lowPrice=null;
  highPrice=null;
  sizeOptions.clear();
  filtered=null;

  notifyListeners();
}

void getFiltered() => filtered??items;

如何在 Flutter 中设计 Filter？

How to design Filters in Flutter?

flutter

dart

flutter-layout

flutter-dependencies

flutter-design