qml下拉条实现

代码结构

Rectangle里面嵌套一个Flickable，然后下面是一个Rectangle，作为滑动的区域，给最外层的Rectangle的y加一个属性动画。滑动区域写好onPressed和Onrelease即可。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    visible: true
    width: 1024
    height: 480
    title: qsTr("Drag Icon")

    Rectangle{
        id:root
        x:0
        y:0
        height:480
        width : 310
        border.color: "black"
        Flickable {
            id: flickable
            width: 300
            height: 420
            clip: true
            contentWidth: contentItem.childrenRect.width
            contentHeight: contentItem.childrenRect.height

            property bool show: true

            Column {
                id: contentColumn
                width: flickable.width
                spacing: 10

                Repeater {
                    model: 20
                    delegate: Rectangle {
                        width: flickable.width - 20
                        height: 50
                        color: index % 2 === 0 ? "lightblue" : "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "Item " + (index + 1)
                        }
                    }
                }
            }

            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AlwaysOn
            }
        }

        Rectangle{
            id:rec
            anchors.top: flickable.bottom
            anchors.topMargin: 20
            height : 20
            width : 300
            color:"red"
            property real startY
            property real threshold : 5
            property bool isopen : true

            Component.onCompleted: {
                rec.isopen = true
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    // 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.y
                    console.log("onpressed startY = " + rec.startY)
                }

                onPressAndHold: {

                }

                onReleased: {
                    var curY = mouse.y
                    console.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  = false
                            yAnimation.to = -450
                            yAnimation.start()
                        }
                    }else{
                        if((curY-rec.startY)>rec.threshold){
                            // 开始下滑
                            rec.isopen = true
                            yAnimation.to = 0
                            yAnimation.start()
                        }
                    }
                    console.log("rec.isopen = " + rec.isopen)
                }

                onPositionChanged:{

                }
            }
        }
        
        Button {
            id: btn
            text: "btn"
            anchors.top: rec.bottom
            onClicked: {
                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: yAnimation
            target: root
            property: "y"
            duration: 200
        }
    }
}