qt-quick-for-designers-1:all_about_lists
This is an old revision of the document!
Table of Contents
All about lists
The following text is taken verbatim from the source slides1) including 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: "<b>Adriel</b> 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: "<b>"+ intern_name + "</b> " + 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
GridView
JavaScript and ListModel
Animating list items
qt-quick-for-designers-1/all_about_lists.1373004261.txt.gz · Last modified: 2013/07/05 06:04 by mithat