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 scroll one item/element at a time
Forum Update on Monday, May 27th 2025

Listview scroll one item/element at a time

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 1.0k Views
  • 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.
  • N Offline
    N Offline
    nikhil30
    wrote on last edited by
    #1

    Hello Qt devs!

    I have a ListView in qml which contains several rows (holding simple information to the user). I am implementing two buttons, which I would like to have the same functionality as the arrow buttons in the scrollbar.
    On clicking up arrow button, last/previous element in list should be displayed, similarly, on clicking down arrow button , next element in list should be displayed
    Can this be done?

    Thank you for your time!

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Mammamia
      wrote on last edited by
      #2

      @nikhil30

      Is this what you are looking for.

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      
      ApplicationWindow {
          width: 640
          height: 480
          visible: true
          title: qsTr("Scroll")
      
          ScrollView {
              anchors.fill: parent
      
              ListView {
                  id: listView
                  width: parent.width
                  model: 20
                  delegate: ItemDelegate {
                      text: "Item " + (index + 1)
                      width: listView.width
                      onClicked: listView.currentIndex = index
                  }
                  currentIndex: 0
                  highlight: Rectangle {
                      width: listView.width
                      height: 40
                      color: "transparent"
                      border.color: "red"
                  }
                  snapMode: ListView.SnapToItem
                  footerPositioning: ListView.OverlayFooter
                  footer: Row {
                      z: 2
                      Button {
                          text: "prev"
                          onClicked: listView.currentIndex = listView.currentIndex - 1
                      }
                      Button {
                          text: "next"
                          onClicked: listView.currentIndex = listView.currentIndex + 1
                      }
                  }
              }
          }
      }
      
      

      Also, have a look at how positionViewAtIndex works. It helps to position the view to the specified index
      positionViewAtIndex

      N 1 Reply Last reply
      0
      • M Mammamia

        @nikhil30

        Is this what you are looking for.

        import QtQuick 2.15
        import QtQuick.Controls 2.15
        
        ApplicationWindow {
            width: 640
            height: 480
            visible: true
            title: qsTr("Scroll")
        
            ScrollView {
                anchors.fill: parent
        
                ListView {
                    id: listView
                    width: parent.width
                    model: 20
                    delegate: ItemDelegate {
                        text: "Item " + (index + 1)
                        width: listView.width
                        onClicked: listView.currentIndex = index
                    }
                    currentIndex: 0
                    highlight: Rectangle {
                        width: listView.width
                        height: 40
                        color: "transparent"
                        border.color: "red"
                    }
                    snapMode: ListView.SnapToItem
                    footerPositioning: ListView.OverlayFooter
                    footer: Row {
                        z: 2
                        Button {
                            text: "prev"
                            onClicked: listView.currentIndex = listView.currentIndex - 1
                        }
                        Button {
                            text: "next"
                            onClicked: listView.currentIndex = listView.currentIndex + 1
                        }
                    }
                }
            }
        }
        
        

        Also, have a look at how positionViewAtIndex works. It helps to position the view to the specified index
        positionViewAtIndex

        N Offline
        N Offline
        nikhil30
        wrote on last edited by nikhil30
        #3

        @Mammamia
        i am using Qt 5.6.3 and also not using itemDelegate as delegate.
        So how to identify the currentIndex position of list view which is displayed...?
        After clicking up/down buttons, i may need to detect the currentItem index of list.

        1 Reply Last reply
        0

        • Login

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