3.02

Views (P0 | 1h)

Tino: New suggestion. Views

Tino: Let's have this before the delegate part (previous session) and let's introduce List, Grid, Path views. Let's very shortly introduce delegates, outline, header, footer, keyboard handling.

Explanation of the contents of a topic page @ Topic reference page

Back to Week 3

Objective: Using QML views

Tino: Using QML views

Beginner

• What is a view?

Intermediate

• What is a list, grid, and path views?
• How delegates are created?
• What is a cache buffer?
• How keyboard is used in delegates?
• How many items is shown by the view?
• What is a hater and footer?

Expert

Omitted

---

Course material content

K: copy pasted from 3.00

For dynamic views Qt Quick provides two commonly used types, ListView and GridView. They both inherit from the Flickable type, which enables users to scroll around in a larger data set. Here we will also use an explicitly defined delegate for the first time. A more in-depth introduction to delegates will follow later in this part of the course.

Let's start by looking into ListView. It's a simple type, and in many ways similar in usage to Repeater. The data presented comes from the model, and the view instantiates a delegate which is used to present the data. Again, the model can be an actual model type, such as ListModel, or it can be a simple integer, as in the following example.

ListView {
    anchors.fill: parent
    anchors.margins: 10
    clip: true
    model: 50
    delegate: numberDelegate
    spacing: 5
}

Component {
    id: numberDelegate

    Rectangle {
        width: 35
        height: 35
        color: "lightGreen"
        border.color: "black"

        Text {
            text: index
            font.pointSize: 12
            anchors.centerIn: parent
        }
    }
}

The clip property will ensure that any list items outside of the view will not be visible. If set false, items will 'flow over' the view.

GridView works in almost identical way, main difference being that it does not rely on spacing and size of delegates, and instead cellWidth and cellHeight are defined in the view.

GridView {
    anchors.fill: parent
    anchors.margins: 10
    clip: true
    model: 100
    cellWidth: 40
    cellHeight: 40
    delegate: numberDelegate
}

Component {
    id: numberDelegate

    Rectangle {
        width: 35
        height: 35
        color: "lightGreen"
        border.color: "black"

        Text {
            text: index
            font.pointSize: 12
            anchors.centerIn: parent
        }
    }
}

Instructions and description for the exercise of the topic

---

Exhaustive reference material mentioned in this topic

https://qmlbook.github.io/en/ch06/index.html
https://doc.qt.io/qt-5/qml-qtquick-listview.html
https://doc.qt.io/qt-5/qml-qtquick-gridview.html
https://doc.qt.io/qt-5/qml-qtquick-pathview.html

Further reading topics/links: