Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to detect a press on a SwipeView



  • Hi
    I am using a Swipeview to horizontally swipe through a list of strings as shown in the image below:

    0_1522988870991_4650c372-665f-4da1-a636-aca58030ed23-image.png

    I would like to detect the case where the user presses the current item of the Swipeview instead of swiping it, in order to show a full list of selectable items from which the user could select.

    How do I go about this?


  • Moderators

    hi @Diracsbracket ,

    I would give the root elements of each swipe-page a mousearea and to deteckt presses clicks etc and than pass the signal along

    something like this.

    MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
    
            onClicked: mouse.accepted = false;
            onPressed:{
                 console.log("MousePressed but passed on") 
                 mouse.accepted = false;
            }
            onReleased: mouse.accepted = false;
            onDoubleClicked: mouse.accepted = false;
            onPositionChanged: mouse.accepted = false;
            onPressAndHold: mouse.accepted = false;
        }
    


  • Hi @J.Hilk
    Thank you very much for your swift solution: it works beautifully!

    As a side question: do you think using a SwipeView for this is overkill, and that I really should be using a horizontal ListView instead? I tried it by replacing the SwipeView by a ListView, setting

    ListView {
        id: itemList
         orientation: Qt.Horizontal
         contentWidth: parent.width
         ...
    }
    

    but all the list items are displayed one on top of each other...


  • Moderators

    @Diracsbracket said in How to detect a press on a SwipeView:

    Hi @J.Hilk
    Thank you very much for your swift solution: it works beautifully! (but why didn't I think of this :-( ?)

    Don't worry, sometimes we can'tsee the wood for the trees. Happens to all of us :)

    As a side question: do you think using a SwipeView for this is overkill, and that I really should be using a horizontal ListView instead? I tried it by replacing the SwipeView by a ListView, setting

    ListView {
        id: itemList
         orientation: Qt.Horizontal
         contentWidth: parent.width
         ...
    }
    

    but all the list items are displayed one on top of each other...

    I think you have to feed the ListView a model so it can arange it items. I'm not sure how you would do that with components. Should be possible, but I haven't done it yet.



  • @J.Hilk said in How to detect a press on a SwipeView:

    I think you have to feed the ListView a model so it can arange it items.

    You're right. I was being lazy by applying the minimal edits to my previous code for the SwipeView, just replacing the element's type to ListView and adding the above orientation properties. Of course, I needed to change a couple of other things, one of which was to eliminate the Repeater element and correctly setting up the model and delegate properties of the ListView.

    Thanks again for your continuous and probably exhausting efforts to help out NOOBs like me.


  • Moderators

    @Diracsbracket said in How to detect a press on a SwipeView:

    Thanks again for your continuous and probably exhausting efforts to help out NOOBs like me.

    You're welcome, and I'm by no means a pro in QML, been using it for a couple of month now.
    Still not a total fan. To Javaesque for my taste.

    #QWidgetsForLife
    :-)



  • I ended using a ListView instead, as it gives me more control about the process (it seems?)

    Item {
                id : remoteLabel
                anchors.fill: parent
    
                PageIndicator {
                    id: remoteIndicator
                    ...
                    count: remoteList.count
                    currentIndex: remoteList.currentIndex
                }
    
                ListView {
                    id: remoteList
                    ...
                    property string currentXmlPath: null
                    property int prevIndex: -1
    
                    highlightRangeMode: ListView.StrictlyEnforceRange
                    orientation: ListView.Horizontal
                    snapMode: ListView.SnapOneItem
    
                    onCurrentIndexChanged: {
                        currentXmlPath = applicationDirPath + "/../remotes/" + currentItem.xml
                        xmlModel.source = "file:///" + currentXmlPath
                    }
    
                    model: remoteListModel
    
                    delegate: Label {
                        width: remoteList.width
                        height: remoteList.height
                        ...
                        horizontalAlignment: Qt.AlignHCenter
                        verticalAlignment: Qt.AlignVCenter
    
                        text: name
                        property string xml: file
                    }
    
                    MouseArea{
                        id: itemMouseArea
                        anchors.fill: parent
                        property int prevX: 0
    
                        //Check if clicked instead of swiped
                        onPressed: prevX = mouseX
                        onReleased: {
                            if (window.locked && Math.abs(mouseX - prevX) < 10)
                            {
                                popup.open()
                            }
                        }
                    }
                }
            }
    

Log in to reply