Home · All Classes · All Functions · Overviews

QML ListModel Element Reference

The ListModel element defines a free-form list data source. More...

Properties

Methods

Detailed Description

The ListModel is a simple hierarchy of elements containing data roles. The contents can be defined dynamically, or explicitly in QML:

For example:

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

Roles (properties) must begin with a lower-case letter. The above example defines a ListModel containing three elements, with the roles "name" and "cost".

The defined model can be used in views such as ListView:

 Component {
     id: fruitDelegate
     Item {
         width: 200; height: 50
         Text { text: name }
         Text { text: '$'+cost; anchors.right: parent.right }
     }
 }

 ListView {
     model: fruitModel
     delegate: fruitDelegate
     anchors.fill: parent
 }

It is possible for roles to contain list data. In the example below we create a list of fruit attributes:

 ListModel {
     id: fruitModel
     ListElement {
         name: "Apple"
         cost: 2.45
         attributes: [
             ListElement { description: "Core" },
             ListElement { description: "Deciduous" }
         ]
     }
     ListElement {
         name: "Orange"
         cost: 3.25
         attributes: [
             ListElement { description: "Citrus" }
         ]
     }
     ListElement {
         name: "Banana"
         cost: 1.95
         attributes: [
             ListElement { description: "Tropical" },
             ListElement { description: "Seedless" }
         ]
     }
 }

The delegate below will list all the fruit attributes:

 Component {
     id: fruitDelegate
     Item {
         width: 200; height: 50
         Text { id: name; text: name }
         Text { text: '$'+cost; anchors.right: parent.right }
         Row {
             anchors.top: name.bottom
             spacing: 5
             Text { text: "Attributes:" }
             Repeater {
                 dataSource: attributes
                 Component { Text { text: description } }
             }
         }
     }
 }

The content of a ListModel may be created and modified using the clear(), append(), and set() methods. For example:

 Component {
     id: fruitDelegate
     Item {
         width: 200; height: 50
         Text { text: name }
         Text { text: '$'+cost; anchors.right: parent.right }

         // Double the price when clicked.
         MouseArea {
             anchors.fill: parent
             onClicked: fruitModel.set(index, "cost", cost*2)
         }
     }
 }

When creating content dynamically, note that the set of available properties cannot be changed except by first clearing the model - whatever properties are first added are then the only permitted properties in the model.

See also Data Models.


Property Documentation

count : int

The number of data entries in the model.


Method Documentation

ListModel::append ( jsobject dict )

Adds a new item to the end of the list model, with the values in dict.

 FruitModel.append({"cost": 5.95, "name":"Pizza"})

See also set() and remove().


ListModel::clear ()

Deletes all content from the model. The properties are cleared such that different properties may be set on subsequent additions.

See also append() and remove().


object ListModel::get ( int index )

Returns the item at index in the list model.

 FruitModel.append({"cost": 5.95, "name":"Jackfruit"})
 FruitModel.get(0).cost

The index must be an element in the list.

Note that properties of the returned object that are themselves objects will also be models, and this get() method is used to access elements:

 FruitModel.append(..., "attributes":
     [{"name":"spikes","value":"7mm"},
      {"name":"color","value":"green"}]);
 FruitModel.get(0).attributes.get(1).value; // == "green"

See also append().


ListModel::insert ( int index, jsobject dict )

Adds a new item to the list model at position index, with the values in dict.

 FruitModel.insert(2, {"cost": 5.95, "name":"Pizza"})

The index must be to an existing item in the list, or one past the end of the list (equivalent to append).

See also set() and append().


ListModel::move ( int from, int to, int n )

Moves n items from one position to another.

The from and to ranges must exist; for example, to move the first 3 items to the end of the list:

 FruitModel.move(0,FruitModel.count-3,3)

See also append().


ListModel::remove ( int index )

Deletes the content at index from the model.

See also clear().


ListModel::set ( int index, jsobject dict )

Changes the item at index in the list model with the values in dict. Properties not appearing in valuemap are left unchanged.

 FruitModel.set(3, {"cost": 5.95, "name":"Pizza"})

The index must be an element in the list.

See also append().


ListModel::setProperty ( int index, string property, variant value )

Changes the property of the item at index in the list model to value.

 FruitModel.set(3, "cost", 5.95)

The index must be an element in the list.

See also append().



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0