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

ListView does not change currentIndex when scrolling



  • Hi,

    I want to have picture slideshow with indicator (which picture is shown) at the bottom, so I have used ListView with snapMode: ListView.SnapOneItem and PageIndicator at the bottom. The problem is that when I "swipe" pictures ListView.currentIndex is not updated, on the other hand when I press PageIndicator and set plantPicView.currentIndex=index ListView changes the current image.
    Below is my code, how to notify PageIndicator that pictures are swiped ?

    Rectangle {
        id: listViewRect
        anchors.top: latinText.bottom
        anchors.topMargin: 10
        width:parent.width-100
        height:3*width/4
        anchors.horizontalCenter: parent.horizontalCenter
        
        ListModel {
            id: plantPicModel
            ListElement { imagePath: "images/1.jpg"; imageName: "flower" }
            ListElement { imagePath: "images/2.jpg"; imageName: "house" }
            ListElement { imagePath: "images/3.jpg"; imageName: "water" }
        }
        
        ListView {
            id: plantPicView
            snapMode: ListView.SnapOneItem
            orientation: Qt.Horizontal
            width:parent.width
            height:parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            clip: true
            z:10
            
            model: plantPicModel 
            delegate: PictureDelegate {
                z:11
                
            }
            spacing: 0
            onCurrentIndexChanged: {
                console.log("plantPicView index:"+currentIndex)
            }
        }
        MouseArea {
            id: plantMouseArea
            z:5
            width: plantFlickable.contentWidth
            height: plantFlickable.contentHeight
            x: -parent.x
            y: 0
            //  preventStealing: true
            propagateComposedEvents: true
            property real velocity: 0.0
            property int xStart: 0
            property int xPrev: 0
            property int yPrev: 0
            property bool tracing: false
            property int swiping
            onPressed: {
                xStart = mouse.x
                xPrev = mouse.x
                velocity = 0
                tracing = true
                swiping = false
            }
            onPositionChanged: {
                if ( !tracing ) return
                var currVel = (mouse.x-xPrev)
                velocity = (velocity + currVel)/2.0
                xPrev = mouse.x
                if ( velocity < -15  ) {
                    tracing = false
                    swiping=true
                }
                if ( velocity > 15  ) {
                    tracing = false
                    swiping=true
                    showMapPage()
                }
            }
            onReleased: {
                tracing = false
            }
        }
    }
    PageIndicator {
        anchors.top: listViewRect.bottom
        anchors.horizontalCenter: listViewRect.horizontalCenter
        currentIndex: plantPicView.view.currentIndex
        count: plantPicModel.count
        
        delegate: Rectangle {
            implicitWidth: 16
            implicitHeight: 16
            
            radius: width / 2
            color: "#21be2b"
            
            opacity: index === plantPicView.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
            
            Behavior on opacity {
                OpacityAnimator {
                    duration: 100
                }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    plantPicView.currentIndex = index
                }
            }
        }
    }
    // PictureDelegate
    Rectangle {
        width:plantPicView.width
        height:plantPicView.height
        color: "#10d848"
        Image {
            id: imageItem
            fillMode: Image.PreserveAspectFit
            anchors.fill: parent
            source: imagePath
        }
    }
    

    plantMouseArea is for getting the right swipe gesture to get back to previous page.

    Best Regards
    Marek


  • Moderators

    @Marek said in ListView does not change currentIndex when scrolling:

    The problem is that when I "swipe" pictures ListView.currentIndex is not updated

    and thats good ;)
    The current index shouldn't change during scrolling. If you need that you need to listen to scroll updates and set the current index yourself accordingly.



  • @raven-worx any hint how to listen to the scroll updates?
    Or maybe there is a better way to do picture slideShow with indicator ?



  • @Marek

    1. You can make use of SwipeView instead of ListView, that is the easiest way to achieve your goal.

    2. For the existing code, add highlightRangeMode: ListView.StrictlyEnforceRange inside ListView.

    From the documentation.

    [snapMode does not affect the currentIndex. To update the currentIndex as the list is moved, set highlightRangeMode to ListView.StrictlyEnforceRange.]
    


  • @Yashpal Thanks, highlightRangeMode: ListView.StrictlyEnforceRange works ;)
    I have tried SwipeView earlier but wasn't sure whether this will work with QAbstractListModel exposed from C++ and the model updates when picture is downloaded from server.

    Best Regards
    Marek



  • Cool. I believe, you should be able to achieve the above easily with SwipeView too.


Log in to reply