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/07/05 05:33] – created mithat | qt-quick-for-designers-1:all_about_lists [2013/07/15 22:59] (current) – mithat | ||
|---|---|---|---|
| Line 2: | Line 2: | ||
| <WRAP center round important 60%> | <WRAP center round important 60%> | ||
| - | The following text is taken verbatim from the source slides((See [[qt-quick-for-designers-1: | + | The following text is taken verbatim from the source slides((See [[qt-quick-for-designers-1: |
| </ | </ | ||
| Line 17: | Line 17: | ||
| * Models in QtQuick | * Models in QtQuick | ||
| * This is how a list item is organized in a QtQuick model. The ListModel element is an array of ListElements | * 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> | <code javascript> | ||
| ListModel { | ListModel { | ||
| Line 28: | Line 29: | ||
| } | } | ||
| }</ | }</ | ||
| - | * See example: addon/ | ||
| - | |||
| + | ===== 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/ | ||
| + | <code javascript> | ||
| + | ... | ||
| + | Text { | ||
| + | id: nameTxt | ||
| + | font.family: | ||
| + | color: "# | ||
| + | font.pixelSize: | ||
| + | text: "< | ||
| + | anchors.left: | ||
| + | anchors.top: | ||
| + | anchors.topMargin: | ||
| + | } | ||
| + | ...</ | ||
| + | * ... 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: | ||
| + | } | ||
| + | ...</ | ||
| - | ===== ListView | + | * Once you’ve done all of this, now you just need to set the ListView |
| + | * 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: | ||
| + | } | ||
| + | } | ||
| + | ...</ | ||
| + | |||
| + | * See example: addon/ | ||
| + | {{youtube> | ||
| ===== GridView ===== | ===== GridView ===== | ||
| Line 43: | Line 107: | ||
| ===== Animating list items ===== | ===== Animating list items ===== | ||
| + | --------------------------------------------------------------------- | ||
| + | ===== Resources ===== | ||
| + | * All source code is subject to this [[copyright header|copyright]]. | ||
qt-quick-for-designers-1/all_about_lists.1373002436.txt.gz · Last modified: 2013/07/05 05:33 by mithat