我是新來撲,我不知道如何開發撲像過濾器
uj5u.com熱心網友回復:
你需要把它分成幾部分。
首先是您的 UI:這些只是標準的 Flutter 小部件。您希望用戶將其向上滑動嗎?弄清楚如何通過向上滑動來顯示 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;
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/339524.html
