廢話(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)題,有些功能還未完善。