如何在Qt4.8中创建滑动效果?
我需要创建一个屏幕,用户将左右滑动,上下滑动,并在每个屏幕上显示另一个屏幕。它就像一个十字,中心和两端是系统的另一个屏幕 我尝试使用GestureArea,但它唯一有效的事件是onTapAndHold,其他事件如onSwipe不会运行。后来我发现Qt4.8在GestureArea中有一个bug,其他事件都不起作用。问题是onTapAndHold事件也会在单击时运行,我只希望它与滑动事件一起运行 完成 我是如何做到的:如何在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
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取代,但我从未使用过它,因此我不知道它是否以相同的方式工作。