flutter下拉上拉元件輪子
什麼是flutter?
首先說下flutter,估計這個應該挺多人沒聽過flutter這個框架,它是一個google推出的跨平臺的移動應用UI框架,和React Native是同樣的目的,支援三大平臺:Android,Ios,還有一個是google新出的系統,忘了叫什麼…本人React Native也是用過一點了,只不過沒深入研究。總的來說,flutter這個框架效能還是可以完全虐React Native,畢竟它沒有中間層。特別是載入GIF,flutter處理得很好,Rn的話,幾張gif在介面載入進去直接卡死奔潰了…flutter還有一個亮點就是,真正的跨平臺,何為真正?就是在IOS裡使用material design,android使用ios風格。兩個平臺執行後介面幾乎一模一樣。最後,說下缺點:沒有JSX或者XML,括號太多,程式碼可讀性差。學習成本比rn高,它layout可以分割成N個元件,你不太容易明白每個layout作用到底是什麼。
簡介
進入正題,這是一個開源的下拉重新整理+上拉載入元件,What?看到這裡,你可能會吐槽又是下拉重新整理,是在重複造輪子嗎?不!如果你搜尋flutter裡的下拉重新整理元件,很難有相當好的輪子。該元件是在外部進行封裝,幾乎適合所有容器,例如:listView,gridView,Container,Text,ScrollView…等等.
為什麼寫這個?
因為flutter現在元件真的太少了,我想找一個下拉重新整理的元件很難,很多都不滿足我的需求,要不缺少UI,要不就擴充套件性很低限制性高。所以為了寫專案第一步,沒有一個好的下拉重新整理元件真的不能寫專案- -。
老闆求個GIF爽下?
IOS:
Android:
如何實現?
一開始其實我打算用它提供的那個Size的動畫,通過對高度改變來實現頭部和尾部,但中途我發現這種想法不行,因為這個動畫只能沿著頂部座標來縮放，不能沿著底部座標為原點來縮放。所以導致Revert過去了。後來也想了很多很多動畫,偏移動畫也試過,還是無果。最後,決定用的方法也是要使用到Size動畫,不過有點不同的是這裡頭部事實上有兩個部件在那,一個是真正的頭部元件,一個是佔位把頭部控制元件壓上去的佔位View,這個佔位View要配合Size的動畫改變大小來使頭部元件能在重新整理狀態裡面懸浮一定距離。這樣就可以實現下拉上拉，並且利用IOS的彈性也是相當吊,在外部元件封裝擴充套件性也很高。
框圖:
感想
實現的過程中,遇到很多很多坑爹的地方。第一,flutter不允許你在build方法裡獲取子元件的高度,其實好像react native也是,因為你介面還沒被渲染出來,肯定沒法知道里面高度,並且沒有提供一個渲染完成的回撥方法,像Android裡的oncreate,這個問題很多人在它的issue起碼提過5,6個帖子。第二,滾動的監聽方法提供有點不完善,具體表現在很多地方。第三,佈局控制元件設計得有點複雜,大家都知道,Android佈局最常用五種對吧?Relative,Linear,Table…等等,但你知道flutter提供了多少種給我們嗎?Row,Column,Center,Align,Flow,Container,Stack….等等數不清,它就是把控制元件的屬性分割為控制元件了,並且這也是大眾吐槽flutter程式碼可讀性的原因,導致學習成本很高。