代碼結構

Rectangle里面嵌套一個Flickable，然后下面是一個Rectangle，作為滑動的區域，給最外層的Rectangle的y加一個屬性動畫。滑動區域寫好onPressed和Onrelease即可。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15Window {visible: truewidth: 1024height: 480title: qsTr("Drag Icon")Rectangle{id:rootx:0y:0height:480width : 310border.color: "black"Flickable {id: flickablewidth: 300height: 420clip: truecontentWidth: contentItem.childrenRect.widthcontentHeight: contentItem.childrenRect.heightproperty bool show: trueColumn {id: contentColumnwidth: flickable.widthspacing: 10Repeater {model: 20delegate: Rectangle {width: flickable.width - 20height: 50color: index % 2 === 0 ? "lightblue" : "lightgreen"Text {anchors.centerIn: parenttext: "Item " + (index + 1)}}}}ScrollBar.vertical: ScrollBar {policy: ScrollBar.AlwaysOn}}Rectangle{id:recanchors.top: flickable.bottomanchors.topMargin: 20height : 20width : 300color:"red"property real startYproperty real threshold : 5property bool isopen : trueComponent.onCompleted: {rec.isopen = true}MouseArea{anchors.fill: parentonClicked: {// rec.startY = mouse.y;// var position = rec.mapToItem(null,mouse.x,mouse.y)// console.log("rec.startY = " + rec.startY)// console.log("position.y = " +position.y)// if(root.y ===0){//     yAnimation.to = -450//     yAnimation.start()// }else{//     yAnimation.to = 0//     yAnimation.start()// }}onPressed: {rec.startY = mouse.yconsole.log("onpressed startY = " + rec.startY)}onPressAndHold: {}onReleased: {var curY = mouse.yconsole.log("curY = " + curY)// console.log("curY = " + curY)// console.log("curY-rec.startY = " + (curY-rec.startY))// console.log("rec.startY-curY= " + (rec.startY-curY))console.log("rec.isopen = " + rec.isopen)if(rec.isopen){if((rec.startY-curY)>rec.threshold){// 開始上滑rec.isopen  = falseyAnimation.to = -450yAnimation.start()}}else{if((curY-rec.startY)>rec.threshold){// 開始下滑rec.isopen = trueyAnimation.to = 0yAnimation.start()}}console.log("rec.isopen = " + rec.isopen)}onPositionChanged:{}}}Button {id: btntext: "btn"anchors.top: rec.bottomonClicked: {console.log("flickable.contentHeight = " + flickable.contentHeight)console.log("contentColumn.height = " + contentColumn.height)console.log("root.y = " + root.y)console.log("rec.isopen = " + rec.isopen)console.log("rec.startY = " + rec.startY)}}NumberAnimation {id: yAnimationtarget: rootproperty: "y"duration: 200}}
}