Qt QML Type ListView

Example Usage

The following example shows the definition of a simple list model defined in a file called ContactModel.qml and another component can display the model data in a ListView, like this:

import QtQuick
import QtQuick.Controls

Page {
    ListView {
        id: listView
        anchors.fill: parent
        model: ContactModel {}
        delegate: Frame {
            width: ListView.view.width - 20
            ItemDelegate {
                width: parent.width
                text: name + ": " + number
                onClicked: {
                    listView.currentIndex = index;
                    listView.forceActiveFocus();
                }
            }
        }
        ScrollBar.vertical: ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
        highlight: Rectangle {
            color: "lightsteelblue"
        }
        focus: true
    }
}

// ContactModel.qml
import QtQuick

ListModel {
    ListElement {
        name: "Bill Smith"
        number: "555 3264"
    }
    ListElement {
        name: "John Brown"
        number: "555 8426"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0473"
    }
}

You can Try it Online!