如何在Qt 4.8中创建滑动效果？

Question

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

我尝试使用GestureArea，但是它唯一起作用的事件是onTapAndHold，其他事件（例如onSwipe）都没有运行。后来我发现Qt 4.8在GestureArea中存在一个错误，其他事件不起作用。问题是onTapAndHold事件也可以在单击时运行，而我只希望它与swipe事件一起运行。

Answer 1

完成！

我是怎么做到的：

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 }
    }
}