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
Forum Updated to NodeBB v4.3 + New Features

Scroll two or more ListViews Using Single ScrollBar

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qmllistviewflickablescrollview
4 Posts 3 Posters 3.5k Views 4 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.
  • 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