I have two rectangle and two images.
Rectangle 1 id “rectgreen” is at postion P1 (x,y) and a image “ imagegreen” at same postion.
Rectangle 2 id “rectred” is at postion P2 (x,y) and a image “ imagered” at same postion.
On click of rectangle 1 id “rectgreen” I am moving the image “imagegreen” 300 pixel right , say P1(x+300,y) using state and transition .This works fine when I change state onclick event of rectgreen.
On click of rectangle 2 id “rectred” I am moving the image “imagered” 300 pixel right , say P2(x+300,y) using state and transition.But when change the state on Click event of “rectred” the redimage move to right* but at the same time “imagegreen” move back to its original position P1 (x,y) *though I am not doing any operation on “imagegreen” while I click on redrect.
Please suggest if I am missing any thing or need to be take any other approach ,( or a QML bug ?).
Code snippet below
////////
import QtQuick 2.0
Rectangle {
id:page;width: 660;height: 660
Rectangle {
id:rectgreen;width: 50;height: 50;color:"yellow";x: 20;y:300
MouseArea {
anchors.fill: parent;
onClicked:page.state = 'stategreenToRight'
}
}
Rectangle {
id:rectred;width: 50;height: 50;color:"yellow";x: 20;y:400;
MouseArea {
anchors.fill: parent;
onClicked: page.state = 'stateredToRight'
}
}
Image {
id: imagegreen;x: 20;y:300;width: 50;height: 50;source: "green.png"
}
Image {
id: imagegred;x: 20;y:400;width: 50;height: 50;source: "red.png"
}
states: [
// In state 'stategreenToRight', move green image to right 300 px
State {
name: "stategreenToRight"
PropertyChanges { target: imagegreen; x: rectgreen.x +300; y: rectgreen.y }
},
// In state 'stateredToRight', move red image to right 300 px
State {
name: "stateredToRight"
PropertyChanges { target: imagegred; x: rectred.x + 300; y: rectred.y }
}
]
transitions: [
Transition {
from: "*"; to: "stategreenToRight"
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
},
Transition {
from: "*"; to: "stateredToRight"
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
}
]
}
↧