Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ListView does not change currentIndex when scrolling
Forum Updated to NodeBB v4.3 + New Features

ListView does not change currentIndex when scrolling

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 3 Posters 4.4k Views 2 Watching
  • 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 Offline
    M Offline
    Marek
    wrote on 18 Jul 2017, 08:01 last edited by
    #1

    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

    R 1 Reply Last reply 18 Jul 2017, 08:03
    0
    • M Marek
      18 Jul 2017, 08:01

      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

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 18 Jul 2017, 08:03 last edited by
      #2

      @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 18 Jul 2017, 08:08
      0
      • R raven-worx
        18 Jul 2017, 08:03

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

        M Offline
        M Offline
        Marek
        wrote on 18 Jul 2017, 08:08 last edited by
        #3

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

        Y 1 Reply Last reply 18 Jul 2017, 08:28
        0
        • M Marek
          18 Jul 2017, 08:08

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

          Y Offline
          Y Offline
          Yashpal
          wrote on 18 Jul 2017, 08:28 last edited by
          #4

          @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 18 Jul 2017, 08:39
          1
          • Y Yashpal
            18 Jul 2017, 08:28

            @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 Offline
            M Offline
            Marek
            wrote on 18 Jul 2017, 08:39 last edited by
            #5

            @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
            0
            • Y Offline
              Y Offline
              Yashpal
              wrote on 18 Jul 2017, 08:43 last edited by
              #6

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

              1 Reply Last reply
              0

              3/6

              18 Jul 2017, 08:08

              • Login

              • Login or register to search.
              3 out of 6
              • First post
                3/6
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved