3.02
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, highlight, header, footer, keyboard handling.
Explanation of the contents of a topic page @ Topic reference page
Objective: Using QML views
Tino: Using QML views
- What is a view?
- 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?
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 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 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, XmlListModel, 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
}
}
}
J: Constantly moving thing in the material is probably annoying, might replace with just a picture.
In the above example we used an explicitly defined delegate. More thorough introduction to delegates will follow later in this part of the course, but let's cover some basics here. Delegate is the third part of Quick's model-view concept. A view will visualize each item list according to the template defined by the delegate. Each delegate gets an access to a number of attached properties, both from the model and the view. For example, the ListView to which the delegate is bound is accessible from the delegate through the ListView.view property.
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. It should be noted that we should avoid using clip in the delegate. If clip is enabled inside a delegate, 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, as in the above example, there will be only one batch in the best case.
There are plenty of other behaviours we can change as well, such as orientation of the list (ListView.Vertical vs ListView.Horizontal), all of which are can be viewed in the ListView documentation.
Views allow visual customization through decoration properties such as the header and footer. By binding an object, usually another visual object, to these properties, the views are decoratable. As an example, a footer may include a Rectangle type showcasing borders, or a header that displays a logo on top of the list. It should be noted that headers and footers don't respect the spacing property in ListView, and thus any spacing needs to be a part of the header/footer itself.
Window {
visible: true
width: 200
height: 480
title: qsTr("Hello World")
ListView {
anchors.fill: parent
anchors.margins: 20
clip: true
model: 4
delegate: numberDelegate
spacing: 2
header: headerComponent
footer: footerComponent
}
Component {
id: headerComponent
Rectangle {
width: ListView.view.width
height: 20
color: "lightBlue"
Text { text: 'Header'; anchors.centerIn: parent; }
}
}
Component {
id: footerComponent
Rectangle {
width: ListView.view.width
height: 20
color: "lightGreen"
Text { text: 'Footer'; anchors.centerIn: parent; }
}
}
Component {
id: numberDelegate
Rectangle {
width: ListView.view.width
height: 40
border.color: "black"
Text { text: 'Item ' + index; anchors.centerIn: parent; }
}
}
}
When using a keyboard to navigate in the ListView, some form of highlighting is necessary to tell which item is currently selected. Two things are necessary to allow keyboard navigation in the ListView. First, the view needs to be given keyboard focus with the property focus: true, and second a special highlight delegate needs to be defined. This is demonstrated in the following example:
ListView {
id: view
anchors.fill: parent
anchors.margins: 20
clip: true
model: 20
delegate: numberDelegate
spacing: 5
highlight: highlightComponent
focus: true
}
Component {
id: highlightComponent
Rectangle {
color: "lightblue"
radius: 10
}
}
Component {
id: numberDelegate
Item {
width: ListView.view.width
height: 40
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}The highlight delegate is given the x, y and height of the current item. If the width is not specified, the width of the current item is used.
GridView is similar to ListView, 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 will display the model data on a Path. A Path type contains segments that are defined types such as PathQuad or PathCurve.
This example shows items on a straight path:
PathView {
id: view
model: 20
path: Path {
startX: 0
startY: height
PathCurve {
x: view.width
y: 0
}
}
delegate: Text {
text: "Index " + index
}
}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