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
 

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