Repeater

Detailed Description

The Repeater element is used to create a large number of similar items. Like other view elements, a Repeater has a model and a delegate: for each entry in the model, the delegate is instantiated in a context seeded with data from the model. A Repeater item is usually enclosed in a positioner element such as Row or Column to visually position the multiple delegate items created by the Repeater.

The following Repeater creates three instances of a Rectangle item within a Row:

 import QtQuick 2.0

 Row {
     Repeater {
         model: 3
         Rectangle {
             width: 100; height: 40
             border.width: 1
             color: "yellow"
         }
     }
 }

[Missing image repeater-simple.png]

A Repeater's model can be any of the supported data models. Additionally, like delegates for other views, a Repeater delegate can access its index within the repeater, as well as the model data relevant to the delegate. See the delegate property documentation for details.

Items instantiated by the Repeater are inserted, in order, as children of the Repeater's parent. The insertion starts immediately after the repeater's position in its parent stacking list. This allows a Repeater to be used inside a layout. For example, the following Repeater's items are stacked between a red rectangle and a blue rectangle:

 Row {
     Rectangle { width: 10; height: 20; color: "red" }
     Repeater {
         model: 10
         Rectangle { width: 20; height: 20; radius: 10; color: "green" }
     }
     Rectangle { width: 10; height: 20; color: "blue" }
 }

[Missing image repeater.png]

Note: A Repeater item owns all items it instantiates. Removing or dynamically destroying an item created by a Repeater results in unpredictable behavior.

 Item {
     //XXX does not work! Can't repeat QtObject as it doesn't derive from Item.
     Repeater {
         model: 10
         QtObject {}
     }
 }

 Column {
     Repeater {
         model: 10
         Text { text: "I'm item " + index }
     }
 }

 Column {
     Repeater {
         model: ["apples", "oranges", "pears"]
         Text { text: "Data: " + modelData }
     }
 }