\image qml-mousearea-example.png
This example shows you how to respond to clicks and drags with a MouseArea.
+
+ When you click inside the red square, the Text element will list several properties
+ of that click which are available to QML.
+
+ Signals are emitted by the MouseArea when clicks or other discrete operations occur within it
+ \snippet examples/quick/mousearea/mousearea.qml clicks
+
+ The MouseArea can also be used to drag elements around. By setting the parameters of the drag property,
+ the target item will be dragged around if the user starts to drag within the MouseArea.
+ \snippet examples/quick/mousearea/mousearea.qml drag
+
*/
Rectangle {
posInfo.text = ''
}
+ //! [clicks]
onPressAndHold: btn.text = 'Press and hold'
onClicked: btn.text = 'Clicked (wasHeld=' + mouse.wasHeld + ')'
onDoubleClicked: btn.text = 'Double clicked'
+ //! [clicks]
}
}
MouseArea {
anchors.fill: parent
+ //! [drag]
drag.target: blueSquare
drag.axis: Drag.XandYAxis
drag.minimumX: 0
drag.maximumX: box.width - parent.width
drag.minimumY: 0
drag.maximumY: box.height - parent.width
+ //! [drag]
}
}
**
****************************************************************************/
-// ![0]
import QtQuick 2.0
Rectangle {
source: "dataloader.js"
}
+// ![0]
Timer {
id: timer
interval: 2000; repeat: true
worker.sendMessage(msg);
}
}
+// ![0]
}
}
-// ![0]
\image qml-threading-example.png
Threaded ListModel contains a ListView and a ListModel. The ListModel is updated asynchronusly in another thread, and the results propagate back to the main thread.
+ A timer requests updates from the worker thread periodically:
+ \snippet examples/threading/threadedlistmodel/timedisplay.qml 0
+
+ Inside the worker thread, the ListModel is synchronized once the data is finished loading:
+ \snippet examples/threading/threadedlistmodel/dataloader.js 0
WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal's Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time.
+
+ When the UI needs another value, a request is sent to the WorkerScript:
+ \snippet examples/threading/workerscript/workerscript.qml 0
+ The workerscript then is free to take a really long time to calculate it:
+ \snippet examples/threading/workerscript/workerscript.js 0
+ When it's done, the result returns to the main scene via the WorkerScript element:
+ \snippet examples/threading/workerscript/workerscript.qml 1
*/
Item {
return 1;
return triangle(row-1, column-1) + triangle(row-1, column);
}
-
+//! [0]
WorkerScript.onMessage = function(message) {
//Calculate result (may take a while, using a naive algorithm)
var calculatedResult = triangle(message.row, message.column);
column: message.column,
result: calculatedResult} );
}
-
+//! [0]
Rectangle {
width: 320; height: 480
+//! [1]
WorkerScript {
id: myWorker
source: "workerscript.js"
}
}
}
+//! [1]
Row {
y: 24
spacing: 24
anchors.horizontalCenter: parent.horizontalCenter
+//! [0]
Spinner {
id: rowSpinner
label: "Row"
myWorker.sendMessage( { row: rowSpinner.value, column: columnSpinner.value } );
}
}
+//! [0]
Spinner {
id: columnSpinner
import QtQuick 2.0
+ //![0]
Rectangle {
width: 320
height: 480
Rectangle {
width: 1000
height: 1000
+ //![0]
x: 100
y: 100
radius: 128
import QtQuick 2.0
import QtQuick.Particles 2.0
+//! [0]
TouchPoint {
id: container
property ParticleSystem system
goalState: "falling"
}
}
+//! [0]
height: 480
color: "black"
+//! [0]
MultiPointTouchArea {
anchors.fill: parent
minimumTouchPoints: 1
TouchPoint { id: touch31 }
]
}
+//! [0]
+//! [1]
ParticleFlame {
color: "red"
x: touch1.x
y: touch1.y
emitting: touch1.pressed
}
+//! [1]
ParticleFlame {
color: "green"
x: touch2.x
property real initialWidth
property real initialHeight
+ //![0]
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
// Move its content within bounds.
flick.returnToBounds()
}
+ //![0]
Rectangle {
width: flick.contentWidth
This is a collection of small QML examples relating to touch interaction methods.
- Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assignning a different colored flame to each touch point.
+ Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point.
+ The MultipointTouchArea sets up multiple touch points:
+ \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 0
+ The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:
+ \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 1
- Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game.
+ Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game
+ is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all
+ this logic embedded into it:
+ \snippet examples/quick/touchinteraction/multipointtouch/bearwhack/content/AugmentedTouchPoint.qml 0
- Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior.
+ Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding
+ to user input.
+ \snippet examples/quick/touchinteraction/pincharea/flickresize.qml 0
- Flickable is a simple example demonstrating the Flickable element.
+ Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small:
+ \snippet examples/quick/touchinteraction/flickable/basic-flickable.qml 0
Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction.
+ This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events.
*/
Item {
projects / profile / ivi / qtdeclarative.git / commitdiff