QML - Possible to display 3 listViews in a single view

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"
        }
    }

}