qt-quick-for-designers-1:all_about_lists
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| qt-quick-for-designers-1:all_about_lists [2013/06/29 04:26] – mithat | qt-quick-for-designers-1:all_about_lists [2013/07/15 22:59] (current) – mithat | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== All about lists ====== | ====== All about lists ====== | ||
| - | * What is a model? | + | <WRAP center round important 60%> |
| - | * Models | + | The following text is taken verbatim from the source slides((See [[qt-quick-for-designers-1: |
| - | * ListView | + | </ |
| - | * GridView | + | |
| - | * Creating a model dynamically | + | |
| ===== Models in QtQuick ===== | ===== Models in QtQuick ===== | ||
| - | * A model is the description of all data about a single item (a.k.a. // | + | * What is a model? |
| - | * Name | + | * All information |
| - | * Surname | + | * Name |
| - | * Telephone Number | + | * Surname |
| - | * Favorite | + | * Telephone Number |
| - | * Icon | + | * Favorite |
| - | * Individual records are expressed '' | + | * Icon |
| - | * The '' | + | |
| - | <file javascript ListModelExample.qml> | + | |
| - | import QtQuick 1.0 | + | |
| + | * 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/ | ||
| + | <code javascript> | ||
| ListModel { | ListModel { | ||
| - | id: listModel | + | ListElement { |
| + | picture: " | ||
| + | name: " | ||
| + | surname: "Nunes Teles" | ||
| + | telephone: "+1 347 715 3354" | ||
| + | favorite: true | ||
| + | icon: " | ||
| + | } | ||
| + | }</ | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: " | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| - | | ||
| - | name: " | ||
| - | | ||
| - | | ||
| - | | ||
| - | icon: "" | ||
| - | } | ||
| - | | ||
| + | ===== 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 | ||
| - | ===== Model views ===== | + | * The first thing to do is to create the list item layout file ... |
| + | * See example: addon/ | ||
| + | <code javascript> | ||
| + | ... | ||
| + | Text { | ||
| + | id: nameTxt | ||
| + | font.family: | ||
| + | color: "# | ||
| + | font.pixelSize: | ||
| + | text: "< | ||
| + | anchors.left: | ||
| + | anchors.top: | ||
| + | anchors.topMargin: | ||
| + | } | ||
| + | ...</ | ||
| - | ==== ListView ==== | + | * ... then you need to make the item flexible enough to accept the variables you need |
| + | * See example: addon/ | ||
| + | <code javascript> | ||
| + | ... | ||
| + | property string intern_name | ||
| + | property string intern_surname | ||
| + | property string intern_telephone | ||
| + | ... | ||
| + | } | ||
| + | Text { | ||
| + | id: nameTxt | ||
| + | font.family: | ||
| + | color: "# | ||
| + | font.pixelSize: | ||
| + | text: "< | ||
| + | anchors.left: | ||
| + | anchors.top: | ||
| + | anchors.topMargin: | ||
| + | } | ||
| + | ...</ | ||
| - | ==== GridView ==== | + | * Once you’ve done all of this, now you just need to set the ListView inside the main file |
| + | * See example: addon/ | ||
| + | <code javascript> | ||
| + | ListView { | ||
| + | id: listExample | ||
| + | orientation: | ||
| + | model: ListModelExample {} | ||
| + | delegate: itemComponent | ||
| + | } | ||
| + | Component { | ||
| + | id: itemComponent | ||
| + | ListItemExample { | ||
| + | intern_name: | ||
| + | intern_surname: | ||
| + | intern_telephone: | ||
| + | intern_icon: | ||
| + | } | ||
| + | } | ||
| + | ...</ | ||
| - | ===== Javascript and ListModel ===== | + | * See example: addon/ |
| - | + | {{youtube> | |
| - | ===== Animating list items ===== | + | |
| + | ===== GridView ===== | ||
| + | ===== JavaScript and ListModel ===== | ||
| + | ===== Animating list items ===== | ||
| + | --------------------------------------------------------------------- | ||
| + | ===== Resources ===== | ||
| + | * All source code is subject to this [[copyright header|copyright]]. | ||
qt-quick-for-designers-1/all_about_lists.1372479999.txt.gz · Last modified: 2013/06/29 04:26 by mithat