QML - Possible to display 3 listViews in a single view - qt

Question

Is it possible to display multiple listViews in a single page?
I have 3 seperate list views and I'd like to display them on a single page and I'm struggling to lay them out. They all overlap each other.
Simple example of the layout:
ListView {
id: listOne
property string headertitle: "list one header"
spacing: 5
header: headerComponent
model: ListOneModel
}
ListView {
id: listTwo
property string headertitle: "list two header"
spacing: 5
header: headerComponent
model: ListTwoModel
}
ListView {
id: listThree
property string headertitle: "list three header"
spacing: 5
header: headerComponent
model: ListThreeModel
}

Answer 1

Note that a Column with 3 ListViews in it will give you a rather odd scrolling experience, where you wouldn't be scrolling it all as if it is a single view, but scroll individual list views.
As long as you don't go crazy with the model sizes (and I mean like thousands), you can simply use a Flickable with a Column with 3 repeaters in it. This will give you a single continuous column you could scroll through.
The reason this solution will not be efficient for thousands of model items is that under normal circumstances, list view creates and destroys delegates as needed, and keeps created only what is visible on screen plus some optional caching. Whereas this solution will create all items, in order to get one uniform column to scroll through.
Here is a quick example demonstrating the 2 distinct behaviors:
Row {
anchors.fill: parent
Flickable {
width: parent.width * .5
height: parent.height
flickableDirection: Flickable.VerticalFlick
contentHeight: contentItem.childrenRect.height
Column {
spacing: 2
Repeater {
model: 5
delegate: Rectangle { width: 100; height: 100; color: "red" }
}
Repeater {
model: 5
delegate: Rectangle { width: 100; height: 100; color: "green" }
}
Repeater {
model: 5
delegate: Rectangle { width: 100; height: 100; color: "blue" }
}
}
}
Column {
width: parent.width * .5
height: parent.height
spacing: 2
ListView {
spacing: 2
width: parent.width
height: parent.height / 3
model: 5
clip: true
delegate: Rectangle { width: 100; height: 100; color: "red" }
}
ListView {
spacing: 2
width: parent.width
height: parent.height / 3
model: 5
clip: true
delegate: Rectangle { width: 100; height: 100; color: "green" }
}
ListView {
spacing: 2
width: parent.width
height: parent.height / 3
model: 5
clip: true
delegate: Rectangle { width: 100; height: 100; color: "blue" }
}
}
}

Answer 2

You can use Column:
import QtQuick 2.0
Rectangle {
width: 180; height: 200
id: root
Column {
ListView {
width: root.width; height: root.height/3
model: myModel
delegate: Text {
text: name + ": " + number
}
}
ListView {
width: root.width; height: root.height/3
model: myModel
delegate: Text {
text: name + ": " + number
}
}
ListView {
width: root.width; height: root.height/3
model: myModel
delegate: Text {
text: name + ": " + number
}
}
}
ListModel {
id: myModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
}