Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
How to use a Flickable inside a Flipable
Jump to navigation
Jump to search
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
}
}
}
}