分享輪子-flutter下拉刷新上拉加載

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
來自個人博客