Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved ListView does not change currentIndex when scrolling

    QML and Qt Quick
    3
    6
    3633
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Marek last edited by

      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 1 Reply Last reply Reply Quote 0
      • raven-worx
        raven-worx Moderators @Marek last edited by

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

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        M 1 Reply Last reply Reply Quote 0
        • M
          Marek @raven-worx last edited by

          @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 1 Reply Last reply Reply Quote 0
          • Yashpal
            Yashpal @Marek last edited by

            @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.]
            
            M 1 Reply Last reply Reply Quote 1
            • M
              Marek @Yashpal last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • Yashpal
                Yashpal last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post