Cross Swipe Screens
Solved
QML and Qt Quick
-
Hello friends!
I need to create a screen where the user will scroll right or left and top or down and on each of these I will present another screen.
It would be like a cross where the center and each end is another screen of the system.
For reasons of legacy environment, I am still required to use Qt 4.8, so my options are limited.
I was thinking of creating something using something from GestureArea to capture the scroll angle made by the user and thus define which screen to display. The actual scrolling to the other screen, I would do via animation transition effect, as I don't see another way to do it.
Any techniques that could make this idea easier?
I've looked at element-by-element in QML and didn't think any of the available ones could be used the way I want, but I may be wrong.
In addition could you give me a better idea or would my idea, within the Qt 4.8 environment, still be the most interesting?
-
Done!
How I did it:
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 } } } -
@Matheus-da-Silva-Ribeiro Please mark your answer as "Correct Answer" to change title to "Solved".
-
This post is deleted!
