ListView does not change currentIndex when scrolling

Marek

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

raven-worx

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

Marek

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

Yashpal

@Marek

You can make use of SwipeView instead of ListView, that is the easiest way to achieve your goal.
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.]

Marek

@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

Yashpal

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