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

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. Third view provided by Qt Quick is PathView, which is a more powerful/customisable/word/thing view, but it's also slightly more complex. In section 3.00 we quickly introduced the ListView type, and now we will have a more thorough look into the three different views. We'll start by having a more in-depth look into ListView.

ListView

ListView is a simple type, and in many ways similar in usage to Repeater covered in section 3.00. The data presented comes from a model, and the view instantiates a delegate which is used to present the data. The model can be an actual model type, such as ListModel or a custom model defined in C++, or it can be a simple integer, as in the following example.

J: This might be the simple example we give already in 3.00 if we want to have a quick intro to views there already, will see.

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

< Picture of ^ > 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.

Tino: I would add here that avoid using clip in the delegates. If clip is enabled, each delegate will be batched separately, i.e. there will be an OpenGL state change between each batch, which affects the rendering performance. By allowing the view (parent of the delegates) to do the clipping, there will be only one batch in the best case. J: Todo: Mention orientation.

Short intro to delegates

Headers and Footers

Keyboard navigation

Sections?

GridView

K: copy pasted from 3.00 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
        }
    }
}

PathView

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: