Layering MouseAreas and MultiPointTouchAreas



  • Hey,

    The main window of my app has tiled elements taking up the whole screen.

    Each tile element has a MultiPointTouchArea that looks like this.
    View.qml:
    @MultiPointTouchArea {
    enabled: parent.interactive
    anchors.fill: parent
    minimumTouchPoints: 2
    maximumTouchPoints: 2

            touchPoints: [
                TouchPoint { id: p1 },
                TouchPoint { id: p2 }
            ]
    
            onTouchUpdated: {
                 //Pinch to zoom.
            }
    
            MouseArea {
                 anchors.fill: parent
                 enabled: parent.enabled
    
                 onDoubleClicked: {
                      //Double click to zoom.
                 }
    
                 onPressed: {
                      //Do something.
                 }
    
                 onReleased: {
                     //Do something.
                 }
    
                 onPositionChanged: {
                     //Drag object around view on position changed.
                 }
             }
       }
    

    @

    Now, on the MainWindow where these tiles are created, there is another MultiPointTouchArea.
    MainWindow.qml:
    @
    Item {
    id: theMainWindow
    property bool interactive

    MultiPointTouchArea {
    id: theViewsTouchArea
    anchors.fill: parent
    minimumTouchPoints: 3
    maximumTouchPoints: 3

            touchPoints: [
                TouchPoint { id: p1 },
                TouchPoint { id: p2 },
                TouchPoint { id: p3 }
            ]
    
            onPressed: {
                parent.interactive = false
                theView.focus = false
                theViewsTouchArea.focus = true
            }
    
            onTouchUpdated: {
                //Move all the views left and right.
            }
    
            onCanceled: {
                theMainWindow.interactive = true
            }
    
            onReleased: {
                theMainWindow.interactive = true
            }
    
            Item {
                id: theViews
    
                Repeater {
                    id: viewList
                    model: viewManagementModel
                    delegate: 
    
                     View {
                        id: theView
                        interactive: theMainWindow.interactive
                    }
                }
            }
    

    @

    So I need these views to still have control over 1 finger and 2 finger motions and be interactive when I'm using 1 or 2 fingers. The problem is I need to use three finger swipe to move through these views (the contentWidth of the views is much larger than the screen width). When I put three fingers on the main window, it disables View.qml's multitoucharea correctly; but there is a slight delay before this happens. This results in a onTouchUpdated zoom event from the MultiPointTouchArea or a onPositionChanged drag event from the MouseArea.

    Is there a better way to do this? Would re-implementing a MouseEvent class myself give me what I want?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.