From 10:00 CET Friday 22nd November we will adjust how the server works to deal with some recently reported problems. Therefore there may be a load problem, if you experience more problems than usual trying to access the forum then please PM AndyS or any of the moderators so they can inform me.


Disabling swipe for QWebEngineView



  • Hey guys,

    I have a Qt Quick application with a SwipeView. One of the pages in this SwipeView is just a QWebEngineView displaying a webpage that contains an Openstreetmap map.

    When I now try to navigate the map by clicking into it and and moving the mouse, the horizontal movement is interpreted as swipe, which makes navigating the map pretty hard.

    The desired behavior would be, that horizontal movement is only propagated to the map and not to the SwipeView. How can I achieve this?

    Since I have buttons at the footer of the SwipeView for navigating it, it would also be fine to disable swiping for the complete page, if this is easier.

    Here is the code of the main.qml defining the SwipeView:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Page1 {
            }
    
            MapPage {
            }
    
            Page3 {
            }
        }
    
        footer: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
            TabButton {
                text: qsTr("Page1")
            }
            TabButton {
                text: qsTr("Map")
            }
            TabButton {
                text: qsTr("Page3")
            }
        }
    }
    
    

    And here is the code of the MapPage.qml:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtWebEngine 1.0
    
    Item {
        WebEngineView {
            anchors.fill: parent
            anchors.margins: 20
            url: "https://www.openstreetmap.org"
        }
    }
    


  • First a note that SwipeView and its base type Container have gained some new members in Qt Quick Controls 2.1 in the upcoming Qt 5.8. These will help with your tasks:

    For the time being, you could add the following binding as a temporary workaround until you will be able to use the new public interactive property:

    Binding {
        property: "interactive"
        target: swipeView.contentItem
        value: swipeView.currentIndex !== indexOfWebEngineView
    }