qt-quick-for-designers-1:all_about_lists
This is an old revision of the document!
Table of Contents
All about lists
- What is a model?
- Models in QtQuick
- ListView
- GridView
- Creating a model dynamically
Models in QtQuick
- A model is the description of all data about a single item (i.e., a description of a record):
- Name
- Surname
- Telephone Number
- Favorite
- Icon
- Individual records are expressed in
ListElement
s.- Elements of a
ListElement
(i.e., “fields”) are called roles.
- ListModelExample.qml
import QtQuick 1.0 ListModel { id: listModel ListElement { picture: "images/user_1.png" name: "Adriel" surname: "Nunes Teles" telephone: "+1 347 715 3354" favorite: true icon: "sms" } ListElement { picture: "images/user_2.png" name: "Alex" surname: "Beek" telephone: "+44 79 3982 8778" favorite: false icon: "gps" } ListElement { picture: "images/no_user.png" name: "Alexandre" surname: "da Rocha Lins" telephone: "+1 718 249 7283" favorite: false icon: "" } ListElement { picture: "images/user_3.png" name: "Alexandre" surname: "Tonin" telephone: "+55 81 8608 3920" favorite: false icon: "" } ListElement { picture: "images/user_4.png" name: "Benjamin" surname: "Abbott" telephone: "+55 11 3962 8776" favorite: true icon: "sms" } ListElement { picture: "images/no_user.png" name: "Biln" surname: "Smith" telephone: "+32 178 8608 3920" favorite: false icon: "sms" } ListElement { picture: "images/no_user.png" name: "Brian" surname: "Morris" telephone: "+1 718 249 7283" favorite: false icon: "" } ListElement { picture: "images/user_5.png" name: "Biln" surname: "Smith" telephone: "+32 178 8608 3920" favorite: false icon: "gps" } ListElement { picture: "images/user_6.png" name: "Bruno" surname: "Costa" telephone: "+55 11 8608 3920" favorite: true icon: "sms" } ListElement { picture: "images/user_7.png" name: "John" surname: "Appleseed" telephone: "+55 81 8608 3920" favorite: false icon: "" } ListElement { picture: "images/no_user.png" name: "Brian" surname: "Morris" telephone: "+1 718 249 7283" favorite: false icon: "" } ListElement { picture: "images/no_user.png" name: "Alexandre" surname: "Tonin" telephone: "+55 81 8608 3920" favorite: false icon: "" } ListElement { picture: "images/user_8.png" name: "Bruno" surname: "Costa" telephone: "+55 11 8608 3920" favorite: true icon: "sms" } ListElement { picture: "images/user_9.png" name: "John" surname: "Appleseed" telephone: "+55 81 8608 3920" favorite: false icon: "" } ListElement { picture: "images/no_user.png" name: "Brian" surname: "Morris" telephone: "+1 718 249 7283" favorite: false icon: "" } }
Model views
ListModel
s are viewed using model views.
ListView
- Viewing a
ListModel
with aListView
requires using at least three different files:- The
ListModel
:- An array of
ListElements
containing all information from each item (as given above).
- Single item view:
- A file that has all the visual elements from each list item and how they appear.
- Main file:
- Contains the
ListView
call, theListModel
and the Component for each single item view that will be repeated.
- ListExample.qml
import QtQuick 1.0 Item { width: 360 height: 640 Image { id: background source: "images/background.jpg" } ListView { id: listExample width: 360 height: 590 anchors.top: background.top anchors.topMargin: 60 anchors.left: background.left anchors.leftMargin: 20 orientation: "Vertical" model: ListModelExample {} delegate: itemComponent clip: true cacheBuffer: 100 } Component { id: itemComponent ListItemDelegate { width: 330 height: 75 intern_name: model.name intern_surname: model.surname intern_telephone: model.telephone intern_icon: model.icon intern_fav: model.favorite } } Image { id: shadowDetail source: "images/shadow_detail.png" anchors.top: listExample.top } Image { id: scrollbar height: 547 source: "images/scroll_bar.png" anchors.right: background.right anchors.rightMargin: 2 anchors.bottom: background.bottom anchors.bottomMargin: 30 } Rectangle { id: scrollknob width: 2 radius: 1 color: "#858d92" anchors.horizontalCenter: scrollbar.horizontalCenter y: (listExample.visibleArea.yPosition * listExample.height) + scrollbar.y height: ((listExample.height/listExample.contentHeight) * listExample.height) - 45 } }
GridView
Javascript and ListModel
Animating list items
1)
Really an array or some other kind of collection?
qt-quick-for-designers-1/all_about_lists.1372481088.txt.gz · Last modified: 2013/06/29 04:44 (external edit)