?????? 開發(fā)B端app過程中，我們經常會遇到類似這樣的需求：“通過多個下拉框的單個或者多個復合條件，對列表進行篩選操作”，類似如下圖：

多條件篩選下拉框

上圖標注分析：紅框內為標題欄，綠框是每個標題所對應的下拉框，下拉框樣式根據項目需求可自定義。藍色框為整體篩選框View，它和標題欄的frame是重疊的，它主要包含了標題欄+下拉框，篩選框用來一致對外交互和輸出。

?????? 此需求分析：1. 需要動態(tài)控制標題欄的個數(shù)；2. 標題欄的點亮熄滅狀態(tài)的控制；3. 標題欄分別對應的下拉框是否一致問題；4.下拉框下拉or上滑動效實現(xiàn)問題；5. 如何封裝拓展，可更加靈活運用于后期其他項目；

???? 個人思路簡述：

?????? 由于外界需要傳遞給篩選框標題組，每個標題會對應不同的下拉框，每個下拉框我們用不同vc的view去實現(xiàn)。因此設計了一個DLFilterItemModel，此model中持有title和listVc兩個屬性，這個itemModel用于篩選框和標題欄之間的數(shù)據傳遞值。如下圖：

filterModel

? ? ?? 然后是標題欄的設計， 自定義xib，用stackView去定義。通過外界傳遞models，動態(tài)添加view到stackView中，然后每個標題的點擊，就對應把model的vc.view添加到藍框篩選框的底部，同時把該事件代理給藍框篩選框，用于外界邏輯交互；如下圖：

標題欄實現(xiàn)

? ? ?? ?? 標題欄中的子view組件封裝，主要有有值，無值，有選中等幾種狀態(tài)，不同賦值方式后，都進行刷新，綜合完畢后決定文字點亮狀態(tài)，具體如下：

標題欄子view封裝

最后是最外層的藍框，篩選框，通過一個方法，接收外界傳入的models， 再傳遞給自己持有的titleview， 內部標題欄點擊事件，listVc的一些自定義事件，都已經代理給當前藍框篩選框。所以外界使用的時候，只需要跟當前藍框篩選框進行交互，藍框篩選框重點交互方法如下：

藍框篩選框交互

具體使用：

1. 自定義繼承于DLFilterItemModel的customModel， 在customModel中自定義標題名；2. 自定義FilterView繼承于藍框DLFilterView；3. 有需求可以自定義listVc； 4. 在項目中把自定義的filterView當成View放在所需要的地方直接使用；

2. 看完還是很蒙??， 移步demo：自定義篩選下拉框，下載該demo，別忘給星??，run起來，然后可以結合該文章思路整理。

3. 如果覺得該文有用，請送出你的小星星。若有更好的思路，不吝賜教。