All about lists

• 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"
  }
}

• 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

• All source code is subject to this copyright.