====== All about lists ======
The following text is taken verbatim from the source slides((See [[qt-quick-for-designers-1:start|Qt Quick for Designers]])) including any errors in the code examples.
===== Models in QtQuick =====
* What is a model?
* All information about one single item
* Name
* Surname
* Telephone Number
* Favorite
* Icon
* Models in QtQuick
* This is how a list item is organized in a QtQuick model. The ListModel element is an array of ListElements
* See example: addon/module-003/examples/ListModelExample.qml
ListModel {
ListElement {
picture: "images/user_1.png"
name: "Adriel"
surname: "Nunes Teles"
telephone: "+1 347 715 3354"
favorite: true
icon: "sms"
}
}
===== ListView =====
* To start creating lists in QtQuick, you must organize your files first.
* You need, at least, three files
* Single item view
* All the visual elements from each list item and how they appear are in this file
* ListModel
* This is the file presented before, an array of ListElements containing all information from each item
* Main file
* This file will contain the ListView call, the ListModel and the Component for each single item view that will be repeated
* The first thing to do is to create the list item layout file ...
* See example: addon/module-003/examples/ItemRenderDelegate.qml
...
Text {
id: nameTxt
font.family: "Univers LT Std"
color: "#c8c8c8"
font.pixelSize: 22
text: "Adriel Nunes Teles"
anchors.left: icon.right
anchors.top: icon.top
anchors.topMargin: 8
}
...
* ... then you need to make the item flexible enough to accept the variables you need
* See example: addon/module-003/examples/ListItemDelegate.qml
...
property string intern_name
property string intern_surname
property string intern_telephone
...
}
Text {
id: nameTxt
font.family: "Univers LT Std"
color: "#c8c8c8"
font.pixelSize: 22
text: ""+ intern_name + " " + intern_surname
anchors.left: icon.right
anchors.top: icon.top
anchors.topMargin: 8
}
...
* Once you’ve done all of this, now you just need to set the ListView inside the main file
* See example: addon/module-003/examples/ListExample.qml
ListView {
id: listExample
orientation: "Vertical"
model: ListModelExample {}
delegate: itemComponent
}
Component {
id: itemComponent
ListItemExample {
intern_name: model.name
intern_surname: model.surname
intern_telephone: model.telephone
intern_icon: model.icon
}
}
...
* See example: addon/module-003/examples/ListExample.qml
{{youtube>LXnDpF2tYkI?medium}}
===== GridView =====
===== JavaScript and ListModel =====
===== Animating list items =====
---------------------------------------------------------------------
===== Resources =====
* All source code is subject to this [[copyright header|copyright]].