如何在Qt4.8中创建滑动效果?

如何在Qt4.8中创建滑动效果?,qt,qml,swipe,gesture,Qt,Qml,Swipe,Gesture,我需要创建一个屏幕,用户将左右滑动,上下滑动,并在每个屏幕上显示另一个屏幕。它就像一个十字,中心和两端是系统的另一个屏幕 我尝试使用GestureArea,但它唯一有效的事件是onTapAndHold,其他事件如onSwipe不会运行。后来我发现Qt4.8在GestureArea中有一个bug,其他事件都不起作用。问题是onTapAndHold事件也会在单击时运行,我只希望它与滑动事件一起运行 完成 我是如何做到的: import QtQuick 1.1 import Qt.labs.gestu

我需要创建一个屏幕,用户将左右滑动,上下滑动,并在每个屏幕上显示另一个屏幕。它就像一个十字,中心和两端是系统的另一个屏幕

我尝试使用GestureArea,但它唯一有效的事件是onTapAndHold,其他事件如onSwipe不会运行。后来我发现Qt4.8在GestureArea中有一个bug,其他事件都不起作用。问题是onTapAndHold事件也会在单击时运行,我只希望它与滑动事件一起运行

完成

我是如何做到的:

import QtQuick 1.1
import Qt.labs.gestures 1.0

import "module"

Rectangle {
    id: recMainWindow
    width: 800
    height: 480
    color: "#00000000"

    property string strActualScreen: "screenCenter"

    function funSwipeScreens(swipeArea)
    {
        if ((!panBottomCenter.running) && (!panCenterBottom.running) &&
            (!panCenterLeft.running) &&  (!panCenterRight.running) &&
            (!panCenterTop.running) &&  (!panLeftCenter.running) &&
            (!panRightCenter.running) &&  (!panTopCenter.running))
        {
            if (swipeArea == "top")
            {
                if (strActualScreen == "screenBottom")
                {
                    strActualScreen = "screenCenter";

                    marLeft.enabled = true;
                    marRight.enabled = true;
                    marBottom.enabled = true;

                    panBottomCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenTop";

                    marTop.enabled = false;
                    marLeft.enabled = false;
                    marRight.enabled = false;

                    panCenterTop.start();
                }
            }
            else if (swipeArea == "bottom")
            {
                if (strActualScreen == "screenTop")
                {
                    strActualScreen = "screenCenter";

                    marTop.enabled = true;
                    marLeft.enabled = true;
                    marRight.enabled = true;

                    panTopCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenBottom";

                    marLeft.enabled = false;
                    marRight.enabled = false;
                    marBottom.enabled = false;

                    panCenterBottom.start();
                }
            }
            else if (swipeArea == "left")
            {
                if (strActualScreen == "screenRight")
                {
                    strActualScreen = "screenCenter";

                    marBottom.enabled = true;
                    marRight.enabled = true;
                    marTop.enabled = true;

                    panRightCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenLeft";

                    marLeft.enabled = false;
                    marBottom.enabled = false;
                    marTop.enabled = false;

                    panCenterLeft.start();
                }
            }
            else if (swipeArea == "right")
            {
                if (strActualScreen == "screenLeft")
                {
                    strActualScreen = "screenCenter";

                    marLeft.enabled = true;
                    marBottom.enabled = true;
                    marTop.enabled = true;

                    panLeftCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenRight";

                    marBottom.enabled = false;
                    marRight.enabled = false;
                    marTop.enabled = false;

                    panCenterRight.start();
                }
            }
        }
    }

    Loader {
        id: loaCenter
        x: 0
        y: 0
        source: "qrc:/qml/centerScreen"
    }

    Loader {
        id: loaTop
        x: 0
        y: -480
        source: "qrc:/qml/topScreen"
    }

    Loader {
        id: loaBottom
        x: 0
        y: 480
        source: "qrc:/qml/bottomScreen"
    }

    Loader {
        id: loaLeft
        x: -800
        y: 0
        source: "qrc:/qml/leftScreen"
    }

    Loader {
        id: loaRight
        x: 800
        y: 0
        source: "qrc:/qml/rightScreen"
    }

    GestureArea {
        id: marLeft
        x: 0
        y: 100
        width: 100
        height: 280
        focus: true
        onTapAndHold: {
            funSwipeScreens("left");
        }
    }

    GestureArea {
        id: marRight
        x: 700
        y: 100
        width: 100
        height: 280
        focus: true
        onTapAndHold: {
            funSwipeScreens("right");
        }
    }

    GestureArea {
        id: marTop
        x: 100
        y: 0
        width: 600
        height: 100
        focus: true
        onTapAndHold: {
            funSwipeScreens("top");
        }
    }

    GestureArea {
        id: marBottom
        x: 100
        y: 380
        width: 600
        height: 100
        focus: true
        onTapAndHold: {
            funSwipeScreens("bottom");
        }
    }

    // TOP ANIMATIONS
    ParallelAnimation {
        id: panCenterTop

        NumberAnimation { target: loaCenter; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaTop; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panTopCenter

        NumberAnimation { target: loaTop; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // BOTTOM ANIMATIONS
    ParallelAnimation {
        id: panCenterBottom

        NumberAnimation { target: loaCenter; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaBottom; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panBottomCenter

        NumberAnimation { target: loaBottom; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // LEFT ANIMATIONS
    ParallelAnimation {
        id: panCenterLeft

        NumberAnimation { target: loaCenter; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaLeft; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panLeftCenter

        NumberAnimation { target: loaLeft; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // RIGHT ANIMATIONS
    ParallelAnimation {
        id: panCenterRight

        NumberAnimation { target: loaCenter; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaRight; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panRightCenter

        NumberAnimation { target: loaRight; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }
}

编辑:

好。。。在检查了我上面使用的GestureArea导致的错误行为后,因为它们对点击onTapAndHold事件做出响应,而我只是想知道刷卡事件的答案,所以我决定删除它们并使用MouseArea进行刷卡模拟

刷卡操作有了很大的改进,GestureArea提出的点击事件问题已经得到解决,但导致了MouseAreas覆盖问题

这在使用GestureArea时不存在,因为它不会阻止单击位于其下方的鼠标earea,而鼠标eareas重叠会阻止它

无论如何,我在下面描述的GestureArea刷卡事件的解决方案:

MouseArea {
    anchors.fill: parent
    preventStealing: true

    property real reaSpeed: 0.0 // calculates drag speed for swipe to run
    property int intStartY: 0 // starting point pressed by the user's finger

    property bool booTracing: false //controls the analyzed drag length

    onPressed: {
        intStartY = mouse.y;

        reaSpeed = 0;

        booTracing = true;
    }

    onPositionChanged: {
        if (!booTracing)
        {
            return;
        }

        reaSpeed = (intStartY - mouse.y) / 2.0;

        if ((reaSpeed > 50) && (mouse.y < (parent.height * 0.2)))
        {
            booTracing = false;

            if (booIsShowMenu)
            {
                sigStartHideMenu();
            }

            funSwipeScreens("bottom");
        }
    }
}
MouseArea{
锚定。填充:父级
防止偷窃:真的
属性reaSpeed:0.0//计算滑动运行的拖动速度
属性int intStartY:0//用户手指按下的起点
属性bool booTracing:false//控制分析的拖动长度
按下按钮:{
intStartY=mouse.y;
速度=0;
booTracing=true;
}
已更改的位置:{
如果(!赛车)
{
返回;
}
reaSpeed=(intStartY-mouse.y)/2.0;
如果((reaSpeed>50)&(mouse.y<(parent.height*0.2)))
{
booTracing=false;
如果(BooisShow菜单)
{
sigStartHideMenu();
}
funSwipeScreens(“底部”);
}
}
}
我正在检查处理鼠标区域覆盖的方法。

完成

我是如何做到的:

import QtQuick 1.1
import Qt.labs.gestures 1.0

import "module"

Rectangle {
    id: recMainWindow
    width: 800
    height: 480
    color: "#00000000"

    property string strActualScreen: "screenCenter"

    function funSwipeScreens(swipeArea)
    {
        if ((!panBottomCenter.running) && (!panCenterBottom.running) &&
            (!panCenterLeft.running) &&  (!panCenterRight.running) &&
            (!panCenterTop.running) &&  (!panLeftCenter.running) &&
            (!panRightCenter.running) &&  (!panTopCenter.running))
        {
            if (swipeArea == "top")
            {
                if (strActualScreen == "screenBottom")
                {
                    strActualScreen = "screenCenter";

                    marLeft.enabled = true;
                    marRight.enabled = true;
                    marBottom.enabled = true;

                    panBottomCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenTop";

                    marTop.enabled = false;
                    marLeft.enabled = false;
                    marRight.enabled = false;

                    panCenterTop.start();
                }
            }
            else if (swipeArea == "bottom")
            {
                if (strActualScreen == "screenTop")
                {
                    strActualScreen = "screenCenter";

                    marTop.enabled = true;
                    marLeft.enabled = true;
                    marRight.enabled = true;

                    panTopCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenBottom";

                    marLeft.enabled = false;
                    marRight.enabled = false;
                    marBottom.enabled = false;

                    panCenterBottom.start();
                }
            }
            else if (swipeArea == "left")
            {
                if (strActualScreen == "screenRight")
                {
                    strActualScreen = "screenCenter";

                    marBottom.enabled = true;
                    marRight.enabled = true;
                    marTop.enabled = true;

                    panRightCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenLeft";

                    marLeft.enabled = false;
                    marBottom.enabled = false;
                    marTop.enabled = false;

                    panCenterLeft.start();
                }
            }
            else if (swipeArea == "right")
            {
                if (strActualScreen == "screenLeft")
                {
                    strActualScreen = "screenCenter";

                    marLeft.enabled = true;
                    marBottom.enabled = true;
                    marTop.enabled = true;

                    panLeftCenter.start();
                }
                else if (strActualScreen == "screenCenter")
                {
                    strActualScreen = "screenRight";

                    marBottom.enabled = false;
                    marRight.enabled = false;
                    marTop.enabled = false;

                    panCenterRight.start();
                }
            }
        }
    }

    Loader {
        id: loaCenter
        x: 0
        y: 0
        source: "qrc:/qml/centerScreen"
    }

    Loader {
        id: loaTop
        x: 0
        y: -480
        source: "qrc:/qml/topScreen"
    }

    Loader {
        id: loaBottom
        x: 0
        y: 480
        source: "qrc:/qml/bottomScreen"
    }

    Loader {
        id: loaLeft
        x: -800
        y: 0
        source: "qrc:/qml/leftScreen"
    }

    Loader {
        id: loaRight
        x: 800
        y: 0
        source: "qrc:/qml/rightScreen"
    }

    GestureArea {
        id: marLeft
        x: 0
        y: 100
        width: 100
        height: 280
        focus: true
        onTapAndHold: {
            funSwipeScreens("left");
        }
    }

    GestureArea {
        id: marRight
        x: 700
        y: 100
        width: 100
        height: 280
        focus: true
        onTapAndHold: {
            funSwipeScreens("right");
        }
    }

    GestureArea {
        id: marTop
        x: 100
        y: 0
        width: 600
        height: 100
        focus: true
        onTapAndHold: {
            funSwipeScreens("top");
        }
    }

    GestureArea {
        id: marBottom
        x: 100
        y: 380
        width: 600
        height: 100
        focus: true
        onTapAndHold: {
            funSwipeScreens("bottom");
        }
    }

    // TOP ANIMATIONS
    ParallelAnimation {
        id: panCenterTop

        NumberAnimation { target: loaCenter; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaTop; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panTopCenter

        NumberAnimation { target: loaTop; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // BOTTOM ANIMATIONS
    ParallelAnimation {
        id: panCenterBottom

        NumberAnimation { target: loaCenter; property: "y"; from: 0; to: -480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaBottom; property: "y"; from: 480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panBottomCenter

        NumberAnimation { target: loaBottom; property: "y"; from: 0; to: 480; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "y"; from: -480; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // LEFT ANIMATIONS
    ParallelAnimation {
        id: panCenterLeft

        NumberAnimation { target: loaCenter; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaLeft; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panLeftCenter

        NumberAnimation { target: loaLeft; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    // RIGHT ANIMATIONS
    ParallelAnimation {
        id: panCenterRight

        NumberAnimation { target: loaCenter; property: "x"; from: 0; to: -800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaRight; property: "x"; from: 800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }

    ParallelAnimation {
        id: panRightCenter

        NumberAnimation { target: loaRight; property: "x"; from: 0; to: 800; duration: 250; easing.type: Easing.InOutQuad }
        NumberAnimation { target: loaCenter; property: "x"; from: -800; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    }
}

编辑:

好。。。在检查了我上面使用的GestureArea导致的错误行为后,因为它们对点击onTapAndHold事件做出响应,而我只是想知道刷卡事件的答案,所以我决定删除它们并使用MouseArea进行刷卡模拟

刷卡操作有了很大的改进,GestureArea提出的点击事件问题已经得到解决,但导致了MouseAreas覆盖问题

这在使用GestureArea时不存在,因为它不会阻止单击位于其下方的鼠标earea,而鼠标eareas重叠会阻止它

无论如何,我在下面描述的GestureArea刷卡事件的解决方案:

MouseArea {
    anchors.fill: parent
    preventStealing: true

    property real reaSpeed: 0.0 // calculates drag speed for swipe to run
    property int intStartY: 0 // starting point pressed by the user's finger

    property bool booTracing: false //controls the analyzed drag length

    onPressed: {
        intStartY = mouse.y;

        reaSpeed = 0;

        booTracing = true;
    }

    onPositionChanged: {
        if (!booTracing)
        {
            return;
        }

        reaSpeed = (intStartY - mouse.y) / 2.0;

        if ((reaSpeed > 50) && (mouse.y < (parent.height * 0.2)))
        {
            booTracing = false;

            if (booIsShowMenu)
            {
                sigStartHideMenu();
            }

            funSwipeScreens("bottom");
        }
    }
}
MouseArea{
锚定。填充:父级
防止偷窃:真的
属性reaSpeed:0.0//计算滑动运行的拖动速度
属性int intStartY:0//用户手指按下的起点
属性bool booTracing:false//控制分析的拖动长度
按下按钮:{
intStartY=mouse.y;
速度=0;
booTracing=true;
}
已更改的位置:{
如果(!赛车)
{
返回;
}
reaSpeed=(intStartY-mouse.y)/2.0;
如果((reaSpeed>50)&(mouse.y<(parent.height*0.2)))
{
booTracing=false;
如果(BooisShow菜单)
{
sigStartHideMenu();
}
funSwipeScreens(“底部”);
}
}
}

我正在检查一种处理MouseAreas覆盖的方法。

对我来说,它给出了一个错误:没有安装模块“Qt.labs.signatures”。@msribeir用于Qt 5。8@JimitRupani我的解决方案是Qt4.8。我知道GestureArea在Qt 5中已停止使用(这就是为什么会出现此错误消息),并已被PinchArea取代,但我从未使用过它,因此我不知道它是否以相同的方式工作。对我来说,它给出了此错误:未安装模块“Qt.labs.birters”。@msribeir用于Qt 5。8@JimitRupani我的解决方案是Qt4.8。我知道GestureArea在Qt5中已停止使用(这就是为什么会出现此错误消息),并已被PinchArea取代,但我从未使用过它,因此我不知道它是否以相同的方式工作。