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

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

}