Крестовидные экраны - PullRequest
Новая
       33

Крестовидные экраны

0 голосов
/ 25 октября 2019

Мне нужно создать экран, где пользователь будет прокручивать вправо или влево и вверх или вниз, и на каждом из них я представлю другой экран.

Это было бы как крест, где центр и каждый конецэто еще один экран системы.

По причинам устаревшей среды мне все еще необходимо использовать Qt 4.8, поэтому мои возможности ограничены.

Я думал о создании чего-либо с использованием чего-либо из GestureAreaзахватить угол прокрутки, сделанный пользователем, и таким образом определить, какой экран отображать. Фактическую прокрутку на другой экран я бы сделал с помощью эффекта анимации перехода, поскольку я не вижу другого способа сделать это.

Какие-нибудь методы, которые могли бы упростить эту идею?

IЯ смотрел на элемент за элементом в QML и не думал, что какой-либо из доступных можно использовать так, как я хочу, но я могу ошибаться.

Кроме того, не могли бы вы дать мне лучшую идеюили моя идея в среде Qt 4.8 все еще будет самой интересной?

1 Ответ

1 голос
/ 25 октября 2019

Готово!

Как я это сделал: 

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