From afbbd1a5d23ab649c37e19225011831a9dbec486 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Mon, 26 Oct 2009 13:55:04 +1000 Subject: Improve states & transitions examples. --- examples/declarative/states/states.qml | 54 ++++++++++++++-------------- examples/declarative/states/transitions.qml | 54 ++++++++++++++-------------- examples/declarative/states/user.png | Bin 0 -> 4886 bytes 3 files changed, 56 insertions(+), 52 deletions(-) create mode 100644 examples/declarative/states/user.png diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml index acab2f0..6f6b40f 100644 --- a/examples/declarative/states/states.qml +++ b/examples/declarative/states/states.qml @@ -2,47 +2,49 @@ import Qt 4.6 Rectangle { id: page - width: 300; height: 300; color: "white" - // A target region. Clicking in here sets the state to '' - the default state + width: 640; height: 480; color: "#343434" + + // A target region. Clicking in here sets the state to the default state Rectangle { - x: 0; y: 0; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='' } } + id: initialPosition + anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = '' } } + // Another target region. Clicking in here sets the state to 'Position1' Rectangle { - x: 150; y: 50; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } } + id: position1 + anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position1' } } + // Another target region. Clicking in here sets the state to 'Position2' Rectangle { - x: 0; y: 200; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } } + id: position2 + anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position2' } } - // Rect which will be moved when my state changes - Rectangle { id: myrect; width: 50; height: 50; color: "red" } + + // The image which will be moved when my state changes + Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y } states: [ - // In state 'Position1', change the 'myrect' item x, y to 150, 50. + // In state 'Position1', change the 'user' item position to rect2's position. State { name: "Position1" - PropertyChanges { - target: myrect - x: 150 - y: 50 - } + PropertyChanges { target: user; x: position1.x; y: position1.y } }, - // In state 'Position2', change y to 100. We do not specify 'x' here - - // it will therefore be restored to its default value of 0, if it - // had been changed. + + // In state 'Position2', change the 'user' item position to rect3's position. State { name: "Position2" - PropertyChanges { - target: myrect - y: 200 - } + PropertyChanges { target: user; x: position2.x; y: position2.y } } ] } diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml index cc6894d..ba97d9be 100644 --- a/examples/declarative/states/transitions.qml +++ b/examples/declarative/states/transitions.qml @@ -2,47 +2,49 @@ import Qt 4.6 Rectangle { id: page - width: 300; height: 300; color: "white" - // A target region. Clicking in here sets the state to '' - the default state + width: 640; height: 480; color: "#343434" + + // A target region. Clicking in here sets the state to the default state Rectangle { - x: 0; y: 0; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='' } } + id: initialPosition + anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = '' } } + // Another target region. Clicking in here sets the state to 'Position1' Rectangle { - x: 150; y: 50; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } } + id: position1 + anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position1' } } + // Another target region. Clicking in here sets the state to 'Position2' Rectangle { - x: 0; y: 200; width: 50; height: 50 - color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } } + id: position2 + anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 } + width: 64; height: 64; radius: 6 + color: "Transparent"; border.color: "Gray" + MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position2' } } - // Rect which will be moved when my state changes - Rectangle { id: myrect; width: 50; height: 50; color: "red" } + + // The image which will be moved when my state changes + Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y } states: [ - // In state 'Position1', change the 'myrect' item x, y to 150, 50. + // In state 'Position1', change the 'user' item position to rect2's position. State { name: "Position1" - PropertyChanges { - target: myrect - x: 150 - y: 50 - } + PropertyChanges { target: user; x: position1.x; y: position1.y } }, - // In state 'Position2', change y to 100. We do not specify 'x' here - - // it will therefore be restored to its default value of 0, if it - // had been changed. + + // In state 'Position2', change the 'user' item position to rect3's position. State { name: "Position2" - PropertyChanges { - target: myrect - y: 200 - } + PropertyChanges { target: user; x: position2.x; y: position2.y } } ] diff --git a/examples/declarative/states/user.png b/examples/declarative/states/user.png new file mode 100644 index 0000000..dd7d7a2 Binary files /dev/null and b/examples/declarative/states/user.png differ -- cgit v0.12