qtlistviewqmlqtquick2flickable

Scroll two or more List views in QML


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


Solution

  • You could just use a Flickable with your Columns. I don't know how your Columns are laid out horizontally but if they are inside a Row it's pretty straightforward:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Multi Column")
    
        Flickable {
            anchors.fill: parent
            contentWidth: row.implicitWidth
            contentHeight: row.implicitHeight
            Row {
                id: row
                Column {
                    spacing: 5
                    Repeater {
                        model: 20
                        delegate: Rectangle {
                            width: 50
                            height: 50
                            color: "red"
                            Text {
                                anchors.centerIn: parent
                                text: index
                            }
                        }
                    }
                }
                Column {
                    spacing: 5
                    Repeater {
                        model: 30
                        delegate: Rectangle {
                            width: 50
                            height: 50
                            color: "cyan"
                            Text {
                                anchors.centerIn: parent
                                text: index
                            }
                        }
                    }
                }
            }
            ScrollBar.vertical: ScrollBar { }
        }
    }
    

    Even if they are not in a Row you could do :
    contentHeight: Math.max(column1.height, column2.height, ...)

    Demonstration :
    Multi columns scroll