flutter學習---下拉篩選組建

做爲前端程序媛，學習flutter仍是有一些不習慣的。因爲項目需求，須要一個下拉篩選的功

能，找了不少demo,惟獨發現鹹魚有相似的功能，可是並無開源，因而開始本身摸索着寫了一下。

開始找錯了方向，看到有DropdownButton, 功能相似，可是並無擴展入口去修改內部菜單的樣式，以及位置。

其實寫完了發現，也沒有多難，仍是不太熟練，嘿嘿。

先看一下實現效果：

下面說一下用到的知識點：

一、Stack 佈局：

習慣了前端用css定位元素，flutter中的有一個單獨的類Positioned, 能夠用它來實現定位。可是這裏有一點須要注意，Positioned在使用中，必須做爲Stack的子元素出現；

使用Stack佈局遇到一個問題，和你們分享一下：當Stack設置overflow屬性爲visible的時候，這個意思就是將超出的部分顯示。

當時個人佈局結構以下：

那麼問題就來了，當你點擊GestureDetector元素的時候，沒有觸發onTap事件！

查了不少資料，發現flutter issues裏邊也有不少提問，可是並無找到什麼解決方案；後來問安卓的同窗，說是由於"渲染機制還有觸摸事件這些機制都是相似於一個樹結構，從根節點循環遍歷，先到父佈局，而後纔到子佈局。由於子佈局位置超出了父佈局邊界限制，因此父佈局根本沒獲取到事件，因此無法造成一個閉環"(複製了咱們的聊天記錄，嘿嘿)。

緣由是找到了，可是並無找到解決方案，因而就想多是個人佈局結構有些問題，換一種佈局方式，就應該能夠避免用到overflow:visible。

因而我修改了佈局以下：

這樣終於實現了我想要的效果～～！開心～～～

二、Animation的實現：

開始想到用DropdownButton也是沒有系統看flutter的動畫怎麼實現；原本幾行css就行的事，到flutter還須要控制器。可是沒辦法，雖然有點抵觸，可是沒辦法啊，我就硬着頭皮看了一天animation的官方文檔，發現其實也沒那麼難嘛！

實現動畫的方式有好幾種，我這裏就用到了最簡單的一種方式；

這裏邊也有一個坑，就是我註釋的那句

setState(() {});複製代碼

開始看官方demo的時候覺得這裏邊是空也沒什麼用，就給刪了，而後就發現動畫沒有效果，直接到了最終的狀態，後來查了一下才發現是這個問題。（查到的竟然是同事寫的一篇文章，果真大神在身邊啊）

下面附上個人源碼：源碼

做爲前端學習flutter仍是瞭解的不是很深刻，若是有什麼寫的不對的地方，請各位大神多多指教啊！

-----------------2019.3.4日更新----------------------------------------

將上邊的例子應用到項目，提取成組件的過程當中，進行了一下擴展，發現以前的佈局邏輯有點問題；

以前：每一個下拉按鈕，都對應一個下拉列表，問題：每一個下拉列表的定位都是相對於按鈕定位的，很難達到都靠左全屏顯示的效果；

優化：全部的按鈕下拉都是同一個列表，替換裏邊的數據；

下拉菜單新增了幾個參數：

buttons： 按鈕數組 數據類型FilterButtonModel
otherWidget： 除了篩選按鈕部分Widget複製代碼

新增數據格式：FilterButtonModel ： 參數以下：String title; //按鈕titleList contents; //下拉列表String type; //下拉篩選類型 'Column'、'Row'Function callback; //按鈕點擊回調，能夠自定義回調，如跳轉頁面等String direction; //下拉箭頭方向複製代碼

效果展現以下：

TODO: 

一、經過狀態管理（Bloc）記錄全部篩選條件，用Chips方式實現；

二、感受動畫有點卡頓，需優化；