flutter 實(shí)現(xiàn)微信下拉小程序菜單

廢話(huà)就不多說(shuō)了,貼圖 (雖然是渣渣效果,但是自己寫(xiě)了一下還是有點(diǎn)感覺(jué)的,對(duì)手勢(shì)這塊有了更加深刻的了解)

主要實(shí)現(xiàn)的方式:

(stack +?Transform 動(dòng)畫(huà) (translate、scale) +?GestureDetector?)實(shí)現(xiàn)

備注: 這里為了不必要的重復(fù)造輪子 使用了?ditclearl 大佬 封裝的?GestureDetector?

大佬地址 :?https://juejin.im/user/582d601d2e958a0069bbe687? ?膜拜膜拜下。

頁(yè)面分為:

1.顯示的內(nèi)容頁(yè)面

2.隱藏的頁(yè)面

還未完善一些動(dòng)畫(huà),只是做了簡(jiǎn)單的封裝,需要的可以下載。

https://github.com/seeyou888999/flutter/tree/Branch001

實(shí)現(xiàn)方式:

1.通過(guò)監(jiān)聽(tīng) ListView 滾動(dòng)置頂?shù)臅r(shí)候 繼續(xù)拖動(dòng) 改變顯示內(nèi)容頁(yè)面的偏移。

2.滾動(dòng)觸發(fā)縮小放大動(dòng)畫(huà),超過(guò)閥值觸發(fā)滾到底部。

3.如果沒(méi)有超過(guò)閥值則置頂

4.上拉復(fù)位。

以下是部分代碼截圖:

1.構(gòu)建隱藏頁(yè)面


2.構(gòu)建內(nèi)容頁(yè)面


3. 手勢(shì)初始化


多的就不貼啦。。 時(shí)間問(wèn)題,有些功能還未完善。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容