Handle Touch and Gestures in Your App

Touch and gestures is the most important form of user input for Apps. V-Play offers multiple components to help you working iwth touch input.

Process a Single Touch Point

For simple touches, that involve only a single finger, the MouseArea is the perfect component. You can define the touchable area by setting the size of the MouseArea.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello V-Play"

       AppText {
         id: touchLog
         font.pixelSize: sp(8)
       }

       // The MouseArea fills the whole page
       MouseArea {
         anchors.fill: parent
         onPressed: touchLog.text += "\nPressed"
         onReleased: touchLog.text += "\nReleased"
         onPositionChanged: touchLog.text += "\nPosition Changed " + mouseX + " + " + mouseY
         onClicked: touchLog.text += "\nClicked"
       }

       // This button is on top of the MouseArea, this it consumes the touch event
       AppButton {
         anchors.right: parent.right
         text: "Clear"
         onClicked: touchLog.text = ""
       }
     }
   }
 }

You can also create custom gesture detection with this component if needed.

Process Multiple Touch Points

For multiple touch points you should have a look at the MultiPointTouchArea component. The following example shows how you can track 2 or more touch points.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Multi Touch"

       MultiPointTouchArea {
         anchors.fill: parent
         touchPoints: [
           TouchPoint { id: point1 },
           TouchPoint { id: point2 }
         ]
       }

       Rectangle {
         width: dp(80)
         height: dp(80)
         color: "green"
         x: point1.x
         y: point1.y
       }

       Rectangle {
         width: dp(80)
         height: dp(80)
         color: "red"
         x: point2.x
         y: point2.y
       }
     }
   }
 }

Detect Gestures

Detecting gestures using the touch points of MouseArea or MultiPointTouchArea is pretty straightforward. For distinct use cases, you can also use additional components, like the Pincharea for example.

There is also a brand new feature avalable as tech preview, the Qt Quick Pointer Handlers

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support