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. Scroll two or more ListViews Using Single ScrollBar
QtWS25 Last Chance

Scroll two or more ListViews Using Single ScrollBar

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qmllistviewflickablescrollview
4 Posts 3 Posters 3.4k 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.
  • P Offline
    P Offline
    pra7
    wrote on 29 Aug 2017, 14:06 last edited by pra7
    #1

    Hello, I need to scroll two or more list view at once using a single scrollBar. Initially, i used Column inside a Flickable but scroll was not happening as expected. Later, I used ListView and even that was not scrolling correctly.

    So,how to scroll a listview/layout content item with a scroll bar? Should I use ScrollView or Flickable or something else?

    Example of My UI

    1 Reply Last reply
    3
    • J Offline
      J Offline
      jpnurmi
      wrote on 4 Sept 2017, 07:35 last edited by jpnurmi 9 Apr 2017, 07:35
      #2

      With Qt Quick Controls 2:

      import QtQuick 2.9
      import QtQuick.Controls 2.2
      
      ApplicationWindow {
          id: window
          width: 640
          height: 480
          visible: true
      
          Row {
              anchors.fill: parent
              anchors.margins: vbar.width
      
              ListView {
                  width: parent.width / 2
                  height: parent.height
                  model: 100
                  delegate: ItemDelegate {
                      width: parent.width
                      text: "A" + modelData
                  }
                  ScrollBar.vertical: vbar
              }
      
              ListView {
                  width: parent.width / 2
                  height: parent.height
                  model: 100
                  delegate: ItemDelegate {
                      width: parent.width
                      text: "B" + modelData
                  }
                  ScrollBar.vertical: vbar
              }
          }
      
          ScrollBar {
              id: vbar
              height: parent.height
              anchors.right: parent.right
              policy: ScrollBar.AlwaysOn
          }
      }
      
      P P 2 Replies Last reply 12 Sept 2017, 15:29
      6
      • J jpnurmi
        4 Sept 2017, 07:35

        With Qt Quick Controls 2:

        import QtQuick 2.9
        import QtQuick.Controls 2.2
        
        ApplicationWindow {
            id: window
            width: 640
            height: 480
            visible: true
        
            Row {
                anchors.fill: parent
                anchors.margins: vbar.width
        
                ListView {
                    width: parent.width / 2
                    height: parent.height
                    model: 100
                    delegate: ItemDelegate {
                        width: parent.width
                        text: "A" + modelData
                    }
                    ScrollBar.vertical: vbar
                }
        
                ListView {
                    width: parent.width / 2
                    height: parent.height
                    model: 100
                    delegate: ItemDelegate {
                        width: parent.width
                        text: "B" + modelData
                    }
                    ScrollBar.vertical: vbar
                }
            }
        
            ScrollBar {
                id: vbar
                height: parent.height
                anchors.right: parent.right
                policy: ScrollBar.AlwaysOn
            }
        }
        
        P Offline
        P Offline
        Praveen_2017
        wrote on 12 Sept 2017, 15:29 last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0
        • J jpnurmi
          4 Sept 2017, 07:35

          With Qt Quick Controls 2:

          import QtQuick 2.9
          import QtQuick.Controls 2.2
          
          ApplicationWindow {
              id: window
              width: 640
              height: 480
              visible: true
          
              Row {
                  anchors.fill: parent
                  anchors.margins: vbar.width
          
                  ListView {
                      width: parent.width / 2
                      height: parent.height
                      model: 100
                      delegate: ItemDelegate {
                          width: parent.width
                          text: "A" + modelData
                      }
                      ScrollBar.vertical: vbar
                  }
          
                  ListView {
                      width: parent.width / 2
                      height: parent.height
                      model: 100
                      delegate: ItemDelegate {
                          width: parent.width
                          text: "B" + modelData
                      }
                      ScrollBar.vertical: vbar
                  }
              }
          
              ScrollBar {
                  id: vbar
                  height: parent.height
                  anchors.right: parent.right
                  policy: ScrollBar.AlwaysOn
              }
          }
          
          P Offline
          P Offline
          pra7
          wrote on 12 Sept 2017, 15:30 last edited by
          #4

          @jpnurmi Thanks !!! its working

          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