User Tools

Site Tools


qt-quick-for-designers-1:all_about_lists

All about lists

The following text is taken verbatim from the source slides1) 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: "<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


Resources

  • All source code is subject to this copyright.
qt-quick-for-designers-1/all_about_lists.txt · Last modified: 2013/07/15 22:59 by mithat