Important: Please read the 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 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