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 latinText.bottom
        anchors.topMargin: 10
        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
            anchors.horizontalCenter: parent.horizontalCenter
            clip: true
            model: plantPicModel 
            delegate: PictureDelegate {
            spacing: 0
            onCurrentIndexChanged: {
                console.log("plantPicView index:"+currentIndex)
        MouseArea {
            id: plantMouseArea
            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
                if ( velocity > 15  ) {
                    tracing = false
            onReleased: {
                tracing = false
    PageIndicator { 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 {
        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

  • 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

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

Log in to reply

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