How to use a Flickable inside a Flipable: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
In a QtQuick application I'm writing I need a Flipable that has Flickable objects on its front and back. My solution is to use Press-and-Hold mouse events to toggle on and off the flipping feature of the Flipable. With flipping disabled, the Flickable objects can receive their flicking events. I use another Press-and-Hold mouse event on one of the Flickables to re-enable flipping.
In a QtQuick application I'm writing I need a Flipable that has Flickable objects on its front and back. My solution is to use Press-and-Hold mouse events to toggle on and off the flipping feature of the Flipable. With flipping disabled, the Flickable objects can receive their flicking events. I use another Press-and-Hold mouse event on one of the Flickables to re-enable flipping.


<code><br />// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5<br />import QtQuick 1.1
<code>
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1


Rectangle {<br /> width: 360<br /> height: 360
Rectangle {
width: 360
height: 360


Flipable {<br /> id: flipable1<br /> property bool flipped: false
Flipable {
id: flipable1
property bool flipped: false


anchors.fill: parent
anchors.fill: parent


back: Flickable {<br /> anchors.fill: parent<br /> contentHeight: backText.height<br /> contentWidth: backText.width
back: Flickable {
anchors.fill: parent
contentHeight: backText.height
contentWidth: backText.width


Text {<br /> id: backText<br /> text: qsTr("Hello Back of the World")<br /> }
Text {
id: backText
text: qsTr("Hello Back of the World")
}


onFlickEnded: console.debug("back flick ended")<br /> onFlickStarted: console.debug("back flick started")
onFlickEnded: console.debug("back flick ended")
onFlickStarted: console.debug("back flick started")


MouseArea {<br /> anchors.fill: parent<br /> onPressAndHold: {<br /> console.debug("back enabling flipping")<br /> flipableMouseArea.toggleEnabled()<br /> }<br /> }<br /> }
MouseArea {
anchors.fill: parent
onPressAndHold: {
console.debug("back enabling flipping")
flipableMouseArea.toggleEnabled()
}
}
}


front: Flickable {<br /> anchors.fill: parent<br /> contentHeight: frontText.height<br /> contentWidth: frontText.width
front: Flickable {
anchors.fill: parent
contentHeight: frontText.height
contentWidth: frontText.width


Text {<br /> id: frontText<br /> text: qsTr("Hello Front of the World")<br /> }
Text {
id: frontText
text: qsTr("Hello Front of the World")
}


onFlickEnded: console.debug("front flick ended")<br /> onFlickStarted: console.debug("front flick started")
onFlickEnded: console.debug("front flick ended")
onFlickStarted: console.debug("front flick started")


MouseArea {<br /> anchors.fill: parent<br /> onPressAndHold: {<br /> console.debug("front enabling flipping")<br /> flipableMouseArea.toggleEnabled()<br /> }<br /> }<br /> }
MouseArea {
anchors.fill: parent
onPressAndHold: {
console.debug("front enabling flipping")
flipableMouseArea.toggleEnabled()
}
}
}


transform: Rotation {<br /> id: rotation<br /> origin.x: flipable1.width/2<br /> origin.y: flipable1.height/2<br /> axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis<br /> angle: 0 // the default angle<br /> }
transform: Rotation {
id: rotation
origin.x: flipable1.width/2
origin.y: flipable1.height/2
axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
angle: 0 // the default angle
}


states: State {<br /> name: "back"<br /> PropertyChanges { target: rotation; angle: 180 }<br /> when: flipable1.flipped<br /> }
states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 }
when: flipable1.flipped
}


transitions: Transition {<br /> NumberAnimation { target: rotation; property: "angle"; duration: flipable1.transitionDuration }<br /> }
transitions: Transition {
NumberAnimation { target: rotation; property: "angle"; duration: flipable1.transitionDuration }
}


MouseArea {<br /> id: flipableMouseArea<br /> anchors.fill: parent<br /> onPressAndHold: toggleEnabled()<br /> onClicked: flipable1.flipped = !flipable1.flipped
MouseArea {
id: flipableMouseArea
anchors.fill: parent
onPressAndHold: toggleEnabled()
onClicked: flipable1.flipped = !flipable1.flipped


function toggleEnabled() {<br /> console.debug("flipping toggled by press and hold")<br /> enabled = ! enabled<br /> }<br /> }<br /> }<br />}<br /></code><br />[[Category:Developing_with_Qt::Qt Quick]]
function toggleEnabled() {
console.debug("flipping toggled by press and hold")
enabled = ! enabled
}
}
}
}
</code>
[[Category:Developing_with_Qt::Qt Quick]]

Revision as of 11:38, 25 February 2015

In a QtQuick application I'm writing I need a Flipable that has Flickable objects on its front and back. My solution is to use Press-and-Hold mouse events to toggle on and off the flipping feature of the Flipable. With flipping disabled, the Flickable objects can receive their flicking events. I use another Press-and-Hold mouse event on one of the Flickables to re-enable flipping.

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
 width: 360
 height: 360

Flipable {
 id: flipable1
 property bool flipped: false

anchors.fill: parent

back: Flickable {
 anchors.fill: parent
 contentHeight: backText.height
 contentWidth: backText.width

Text {
 id: backText
 text: qsTr("Hello Back of the World")
 }

onFlickEnded: console.debug("back flick ended")
 onFlickStarted: console.debug("back flick started")

MouseArea {
 anchors.fill: parent
 onPressAndHold: {
 console.debug("back enabling flipping")
 flipableMouseArea.toggleEnabled()
 }
 }
 }

front: Flickable {
 anchors.fill: parent
 contentHeight: frontText.height
 contentWidth: frontText.width

Text {
 id: frontText
 text: qsTr("Hello Front of the World")
 }

onFlickEnded: console.debug("front flick ended")
 onFlickStarted: console.debug("front flick started")

MouseArea {
 anchors.fill: parent
 onPressAndHold: {
 console.debug("front enabling flipping")
 flipableMouseArea.toggleEnabled()
 }
 }
 }

transform: Rotation {
 id: rotation
 origin.x: flipable1.width/2
 origin.y: flipable1.height/2
 axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
 angle: 0 // the default angle
 }

states: State {
 name: "back"
 PropertyChanges { target: rotation; angle: 180 }
 when: flipable1.flipped
 }

transitions: Transition {
 NumberAnimation { target: rotation; property: "angle"; duration: flipable1.transitionDuration }
 }

MouseArea {
 id: flipableMouseArea
 anchors.fill: parent
 onPressAndHold: toggleEnabled()
 onClicked: flipable1.flipped = !flipable1.flipped

function toggleEnabled() {
 console.debug("flipping toggled by press and hold")
 enabled = ! enabled
 }
 }
 }
}