flutter下拉上拉組件輪子

什么是flutter?

首先說(shuō)下flutter,估計(jì)這個(gè)應(yīng)該挺多人沒(méi)聽(tīng)過(guò)flutter這個(gè)框架,它是一個(gè)google推出的跨平臺(tái)的移動(dòng)應(yīng)用UI框架,和React Native是同樣的目的,支持三大平臺(tái):Android,Ios,還有一個(gè)是google新出的系統(tǒng),忘了叫什么...本人React Native也是用過(guò)一點(diǎn)了,只不過(guò)沒(méi)深入研究。總的來(lái)說(shuō),flutter這個(gè)框架性能還是可以完全虐React Native,畢竟它沒(méi)有中間層。特別是加載GIF,flutter處理得很好,Rn的話,幾張gif在界面加載進(jìn)去直接卡死奔潰了...flutter還有一個(gè)亮點(diǎn)就是,真正的跨平臺(tái),何為真正?就是在IOS里使用material design,android使用ios風(fēng)格。兩個(gè)平臺(tái)運(yùn)行后界面幾乎一模一樣。最后,說(shuō)下缺點(diǎn):沒(méi)有JSX或者XML,括號(hào)太多,代碼可讀性差。學(xué)習(xí)成本比rn高,它layout可以分割成N個(gè)組件,你不太容易明白每個(gè)layout作用到底是什么。

簡(jiǎn)介

進(jìn)入正題,這是一個(gè)開(kāi)源的下拉刷新 上拉加載組件,What?看到這里,你可能會(huì)吐槽又是下拉刷新,是在重復(fù)造輪子嗎?不!如果你搜索flutter里的下拉刷新組件,很難有相當(dāng)好的輪子。該組件是在外部進(jìn)行封裝,幾乎適合所有容器,例如:listView,gridView,Container,Text,ScrollView...等等.

為什么寫(xiě)這個(gè)?

因?yàn)閒lutter現(xiàn)在組件真的太少了,我想找一個(gè)下拉刷新的組件很難,很多都不滿足我的需求,要不缺少UI,要不就擴(kuò)展性很低限制性高。所以為了寫(xiě)項(xiàng)目第一步,沒(méi)有一個(gè)好的下拉刷新組件真的不能寫(xiě)項(xiàng)目- -。

老板求個(gè)GIF爽下?

IOS:

Android:

如何實(shí)現(xiàn)?

一開(kāi)始其實(shí)我打算用它提供的那個(gè)Size的動(dòng)畫(huà),通過(guò)對(duì)高度改變來(lái)實(shí)現(xiàn)頭部和尾部,但中途我發(fā)現(xiàn)這種想法不行,因?yàn)檫@個(gè)動(dòng)畫(huà)只能沿著頂部坐標(biāo)來(lái)縮放，不能沿著底部坐標(biāo)為原點(diǎn)來(lái)縮放。所以導(dǎo)致Revert過(guò)去了。后來(lái)也想了很多很多動(dòng)畫(huà),偏移動(dòng)畫(huà)也試過(guò),還是無(wú)果。最后,決定用的方法也是要使用到Size動(dòng)畫(huà),不過(guò)有點(diǎn)不同的是這里頭部事實(shí)上有兩個(gè)部件在那,一個(gè)是真正的頭部組件,一個(gè)是占位把頭部控件壓上去的占位View,這個(gè)占位View要配合Size的動(dòng)畫(huà)改變大小來(lái)使頭部組件能在刷新?tīng)顟B(tài)里面懸浮一定距離。這樣就可以實(shí)現(xiàn)下拉上拉，并且利用IOS的彈性也是相當(dāng)?shù)?在外部組件封裝擴(kuò)展性也很高。 框圖:

感想

實(shí)現(xiàn)的過(guò)程中,遇到很多很多坑爹的地方。第一,flutter不允許你在build方法里獲取子組件的高度,其實(shí)好像react native也是,因?yàn)槟憬缑孢€沒(méi)被渲染出來(lái),肯定沒(méi)法知道里面高度,并且沒(méi)有提供一個(gè)渲染完成的回調(diào)方法,像Android里的oncreate,這個(gè)問(wèn)題很多人在它的issue起碼提過(guò)5,6個(gè)帖子。第二,滾動(dòng)的監(jiān)聽(tīng)方法提供有點(diǎn)不完善,具體表現(xiàn)在很多地方。第三,布局控件設(shè)計(jì)得有點(diǎn)復(fù)雜,大家都知道,Android布局最常用五種對(duì)吧?Relative,Linear,Table...等等,但你知道flutter提供了多少種給我們嗎?Row,Column,Center,Align,Flow,Container,Stack....等等數(shù)不清,它就是把控件的屬性分割為控件了,并且這也是大眾吐槽flutter代碼可讀性的原因,導(dǎo)致學(xué)習(xí)成本很高。

附地址

Github
來(lái)自我的博客

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。