QML ScrollView 实现Flick功能

import QtQuick 2.12
import QtQuick.Window 2.12

import QtPositioning 5.2
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "#2E2F30"



//    Flickable {
//           id: scrollView
//           //z:1

//           clip: true
//           contentWidth: 19200
//           contentHeight: 10800
//           anchors.fill: parent

//           //ScrollBar.vertical.policy: ScrollBar.AlwaysOn
//           //ScrollBar.horizontal.policy: ScrollBar.AlwaysOn

//           Rectangle{
//               id:content
//               z:2
//               width: parent.contentWidth
//               height: parent.contentHeight
//               Rectangle{
//                   width: 1920
//                   height: 1080
//                   color: "red"
//                   MouseArea{
//                       anchors.fill: parent
//                       drag.target: parent
//                   }
//               }
//           }
//           Component.onCompleted: {
//               scrollView.contentItem.transformOrigin = Item.TopLeft
//               scrollView.contentItem.scale = 0.1
//           }

//        }

    ScrollView {
           id: scrollView
           //z:1

           clip: true
           contentWidth: 19200
           contentHeight: 10800
           anchors.fill: parent

           ScrollBar.vertical.policy: ScrollBar.AlwaysOn
           ScrollBar.horizontal.policy: ScrollBar.AlwaysOn

           Rectangle{
               id:content
               z:2
               width: parent.contentWidth
               height: parent.contentHeight
               Rectangle{
                   width: 1920
                   height: 1080
                   color: "red"
                   MouseArea{
                       anchors.fill: parent
                       drag.target: parent
                   }
               }
           }
           Component.onCompleted: {
               scrollView.contentItem.transformOrigin = Item.TopLeft
               scrollView.contentItem.scale = 0.1
           }

        }
    MouseArea{
         z:0
        anchors.fill: parent
        property var pressPos:Qt.point(0,0)
        property var scrollVPos:0.0
        property var scrollHPos:0.0
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onPressed: {
            pressPos = Qt.point(mouse.x,mouse.y)
            console.log("onPressed:",pressPos)
             if(scrollView.ScrollBar.vertical.position < 0.0)
             {
                 scrollView.ScrollBar.vertical.position = 0.0
                 scrollVPos = 0.0
             }
             if(scrollView.ScrollBar.horizontal.position < 0.0)
             {
                 scrollView.ScrollBar.horizontal.position = 0.0
                 scrollHPos = 0.0
             }
        }
        onPositionChanged: {
              var curPos = Qt.point(mouse.x, mouse.y)
            var moveVector = Qt.point(curPos.x - pressPos.x, curPos.y - pressPos.y)
            var xMoveRatio = moveVector.x / scrollView.width
            var yMoveRatio = moveVector.y / scrollView.height

            if(scrollVPos + yMoveRatio < 0.0)
                scrollView.ScrollBar.vertical.position = 0.0
            else
                scrollView.ScrollBar.vertical.position = scrollVPos + yMoveRatio

            if(scrollHPos + xMoveRatio < 0.0)
                scrollView.ScrollBar.horizontal.position = 0.0
            else
                scrollView.ScrollBar.horizontal.position = scrollHPos + xMoveRatio
            //console.log("onPositionChanged:", pressPos, curPos, moveVector, scrollView.contentWidth, scrollView.contentHeight,xMoveRatio, yMoveRatio,scrollView.ScrollBar.vertical.position)

        }
        onReleased: {
            pressPos = Qt.point(0, 0)
            scrollVPos = scrollView.ScrollBar.vertical.position
            scrollHPos = scrollView.ScrollBar.horizontal.position
            //console.log("onReleased:ddddddddddddddddddddddddddddd", pressPos)
        }
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xhh-cy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值