flutter - 如何在 Flutter 中设计过滤器？

Question

我是flutter的新手，我想知道如何在flutter中开发过滤器（截图取自google图片），所以我只想知道如何在flutter中进行过滤，有没有像插件或特殊小部件这样的东西？如果您提供任何参考或代码或任何教程将有助于我学习。谢谢你提前。

Answer 1

你需要把它分成几块。

首先是你的 UI：这些只是标准的 Flutter Widget。您希望用户向上滑动它吗？弄清楚如何通过向上滑动来显示 Widget。您希望它出现在警报弹出窗口中吗？弄清楚如何弹出警报。过滤器 UI 与任何其他 UI 没有什么不同 - 因此您可以查找和询问通用 UI 问题。

其次是你如何实现模型。它可以是一些简单的东西，例如保存您获取的项目列表的 Provider；然后每个过滤器将更多 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;

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

要在此处回答您的后续问题：

您混合了“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.isNotEmpty && sizeOptions.contains(e));
  
  notifyListeners();
}

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

  notifyListeners();
}

void getFiltered() => filtered??items;