How to detect a press on a SwipeView

[Diracsbracket]

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

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?

[J.Hilk]

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;
    }

[Diracsbracket]

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...

[J.Hilk]

@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.

[Diracsbracket]

@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.

[J.Hilk]

@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
:-)

[Diracsbracket]

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()
                        }
                    }
                }
            }
        }