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代碼可讀性的原因,導致學習成本很高。

附地址

Github
來自我的博客

總結

以上是生活随笔為你收集整理的分享轮子-flutter下拉刷新上拉加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。