Models and Views

Models

Data is provided to the delegate via named data roles which the delegate may bind to. Here is a ListModel with two roles, type and age, and a ListView with a delegate that binds to these roles to display their values:

 import QtQuick 2.0

 Item {
     width: 200; height: 250

     ListModel {
         id: myModel
         ListElement { type: "Dog"; age: 8 }
         ListElement { type: "Cat"; age: 5 }
     }

     Component {
         id: myDelegate
         Text { text: type + ", " + age }
     }

     ListView {
         anchors.fill: parent
         model: myModel
         delegate: myDelegate
     }
 }

If there is a naming clash between the model's properties and the delegate's properties, the roles can be accessed with the qualified model name instead. For example, if a Text element had type or age properties, the text in the above example would display those property values instead of the type and age values from the model item. In this case, the properties could have been referenced as model.type and model.age instead to ensure the delegate displays the property values from the model item.

A special index role containing the index of the item in the model is also available to the delegate. Note this index is set to -1 if the item is removed from the model. If you bind to the index role, be sure that the logic accounts for the possibility of index being -1, i.e. that the item is no longer valid. (Usually the item will shortly be destroyed, but it is possible to delay delegate destruction in some views via a delayRemove attached property.)

Models that do not have named roles (such as the ListModel shown below) will have the data provided via the modelData role. The modelData role is also provided for models that have only one role. In this case the modelData role contains the same data as the named role.

QML provides several types of data models among the built-in set of QML elements. In addition, models can be created with Qt C++ and then made available to the QML engine for use by QML components. For information about creating these models, visit the Exposing C++ Models and Creating QML Types articles.

The use of positioner items to arrange items from a model is covered in Generating Items with Repeaters.

 ListModel {
     id: fruitModel

     ListElement {
         name: "Apple"
         cost: 2.45
     }
     ListElement {
         name: "Orange"
         cost: 3.25
     }
     ListElement {
         name: "Banana"
         cost: 1.95
     }
 }

 ListView {
     anchors.fill: parent
     model: fruitModel
     delegate: Row {
         Text { text: "Fruit: " + name }
         Text { text: "Cost: $" + cost }
     }
 }

 ListModel { id: fruitModel }
     ...
 MouseArea {
     anchors.fill: parent
     onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"})
 }

 import QtQuick.XmlListModel 2.0

 XmlListModel {
      id: feedModel
      source: "http://rss.news.yahoo.com/rss/oceania"
      query: "/rss/channel/item"
      XmlRole { name: "title"; query: "title/string()" }
      XmlRole { name: "link"; query: "link/string()" }
      XmlRole { name: "description"; query: "description/string()" }
 }

 VisualItemModel {
     id: itemModel
     Rectangle { height: 30; width: 80; color: "red" }
     Rectangle { height: 30; width: 80; color: "green" }
     Rectangle { height: 30; width: 80; color: "blue" }
 }

 ListView {
     anchors.fill: parent
     model: itemModel
 }

 Item {
     width: 200; height: 250

     Component {
         id: itemDelegate
         Text { text: "I am item number: " + index }
     }

     ListView {
         anchors.fill: parent
         model: 5
         delegate: itemDelegate
     }

 }

 Rectangle {
     width: 200; height: 250

     Text {
         id: myText
         text: "Hello"
         color: "#dd44ee"
     }

     Component {
         id: myDelegate
         Text { text: model.color }
     }

     ListView {
         anchors.fill: parent
         anchors.topMargin: 30
         model: myText
         delegate: myDelegate
     }
 }

 import QtQuick 2.0

 Rectangle {
     width: 400; height: 400; color: "black"

     Grid {
         x: 5; y: 5
         rows: 5; columns: 5; spacing: 10

         Repeater { model: 24
                    Rectangle { width: 70; height: 70
                                color: "lightgreen"

                                Text { text: index
                                       font.pointSize: 30
                                       anchors.centerIn: parent } }
         }
     }
 }