<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qdeclarativerepeater.cpp -->
<title>Qt 4.8: QML Repeater Element</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="qdeclarativeelements.html">QML Elements</a></li>
<li>QML Repeater Element</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#signal-handlers">Signal Handlers</a></li>
<li class="level1"><a href="#methods">Methods</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#considerations-when-using-repeater">Considerations when using Repeater</a></li>
</ul>
</div>
<h1 class="title">QML Repeater Element</h1>
<span class="subtitle"></span>
<!-- $$$Repeater-brief -->
<p>The Repeater element allows you to repeat an Item-based component using a model. <a href="#details">More...</a></p>
<!-- @@@Repeater -->
<p>Inherits <a href="qml-item.html">Item</a></p>
<p>This element was introduced in Qt 4.7.</p>
<ul>
<li><a href="qml-repeater-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-repeater.html#count-prop">count</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-repeater.html#delegate-prop">delegate</a></b></b> : Component</li>
<li class="fn"><b><b><a href="qml-repeater.html#model-prop">model</a></b></b> : any</li>
</ul>
<a name="signal-handlers"></a>
<h2>Signal Handlers</h2>
<ul>
<li class="fn"><b><b><a href="qml-repeater.html#onItemAdded-signal">onItemAdded</a></b></b></li>
<li class="fn"><b><b><a href="qml-repeater.html#onItemRemoved-signal">onItemRemoved</a></b></b></li>
</ul>
<a name="methods"></a>
<h2>Methods</h2>
<ul>
<li class="fn"><b><b><a href="qml-repeater.html#itemAt-method">itemAt</a></b></b></li>
</ul>
<!-- $$$Repeater-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>The Repeater element is used to create a large number of similar items. Like other view elements, a Repeater has a <a href="qml-repeater.html#model-prop">model</a> and a <a href="qml-repeater.html#delegate-prop">delegate</a>: 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 <a href="qml-row.html">Row</a> or <a href="qml-column.html">Column</a> to visually position the multiple delegate items created by the Repeater.</p>
<p>The following Repeater creates three instances of a <a href="qml-rectangle.html">Rectangle</a> item within a <a href="qml-row.html">Row</a>:</p>
<pre class="qml"> import QtQuick 1.0
<span class="type"><a href="qml-row.html">Row</a></span> {
<span class="type">Repeater</span> {
<span class="name">model</span>: <span class="number">3</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">40</span>
<span class="name">border</span>.width: <span class="number">1</span>
<span class="name">color</span>: <span class="string">"yellow"</span>
}
}
}</pre>
<p class="centerAlign"><img src="images/repeater-simple.png" alt="" /></p><p>A Repeater's <a href="qml-repeater.html#model-prop">model</a> can be any of the supported <a href="qdeclarativemodels.html#qmlmodels">data models</a>. 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 <a href="qml-repeater.html#delegate-prop">delegate</a> property documentation for details.</p>
<p>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:</p>
<pre class="qml"> <span class="type"><a href="qml-row.html">Row</a></span> {
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">10</span>; <span class="name">height</span>: <span class="number">20</span>; <span class="name">color</span>: <span class="string">"red"</span> }
<span class="type">Repeater</span> {
<span class="name">model</span>: <span class="number">10</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">20</span>; <span class="name">height</span>: <span class="number">20</span>; <span class="name">radius</span>: <span class="number">10</span>; <span class="name">color</span>: <span class="string">"green"</span> }
}
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">10</span>; <span class="name">height</span>: <span class="number">20</span>; <span class="name">color</span>: <span class="string">"blue"</span> }
}</pre>
<p class="centerAlign"><img src="images/repeater.png" alt="" /></p><p><b>Note:</b> A Repeater item owns all items it instantiates. Removing or dynamically destroying an item created by a Repeater results in unpredictable behavior.</p>
<a name="considerations-when-using-repeater"></a>
<h3>Considerations when using Repeater</h3>
<p>The Repeater element creates all of its delegate items when the repeater is first created. This can be inefficient if there are a large number of delegate items and not all of the items are required to be visible at the same time. If this is the case, consider using other view elements like <a href="qml-listview.html">ListView</a> (which only creates delegate items when they are scrolled into view) or use the <a href="qml-qt.html#dynamic-object-creation">Dynamic Object Creation</a> methods to create items as they are required.</p>
<p>Also, note that Repeater is <a href="qml-item.html">Item</a>-based, and can only repeat <a href="qml-item.html">Item</a>-derived objects. For example, it cannot be used to repeat QtObjects:</p>
<pre class="cpp"> Item {
//XXX does not work! Can't repeat QtObject as it doesn't derive from Item.
Repeater {
model: 10
QtObject {}
}
}</pre>
<!-- @@@Repeater -->
<h2>Property Documentation</h2>
<!-- $$$count -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="count-prop"></a><span class="qmlreadonly">read-only</span><span class="name">count</span> : <span class="type"><a href="qml-int.html">int</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the number of items in the repeater.</p>
</div></div><!-- @@@count -->
<br/>
<!-- $$$delegate -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="delegate-prop"></a><span class="qmldefault">default</span><span class="name">delegate</span> : <span class="type"><a href="qml-component.html">Component</a></span></p></td></tr></table></div><div class="qmldoc"><p>The delegate provides a template defining each item instantiated by the repeater.</p>
<p>Delegates are exposed to a read-only <tt>index</tt> property that indicates the index of the delegate within the repeater. For example, the following <a href="qml-text.html">Text</a> delegate displays the index of each repeated item:</p>
<table class="generic">
<tr valign="top" class="odd"><td ><pre class="qml"> <span class="type"><a href="qml-column.html">Column</a></span> {
<span class="type"><a href="qml-repeater.html">Repeater</a></span> {
<span class="name">model</span>: <span class="number">10</span>
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"I'm item "</span> <span class="operator">+</span> <span class="name">index</span> }
}
}</pre>
</td><td ><p class="centerAlign"><img src="images/repeater-index.png" alt="" /></p></td></tr>
</table>
<p>If the <a href="qml-repeater.html#model-prop">model</a> is a <a href="qdeclarativemodels.html#qstringlist-based-model">string list</a> or <a href="qdeclarativemodels.html#qobjectlist-based-model">object list</a>, the delegate is also exposed to a read-only <tt>modelData</tt> property that holds the string or object data. For example:</p>
<table class="generic">
<tr valign="top" class="odd"><td ><pre class="qml"> <span class="type"><a href="qml-column.html">Column</a></span> {
<span class="type"><a href="qml-repeater.html">Repeater</a></span> {
<span class="name">model</span>: [<span class="string">"apples"</span>, <span class="string">"oranges"</span>, <span class="string">"pears"</span>]
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"Data: "</span> <span class="operator">+</span> <span class="name">modelData</span> }
}
}</pre>
</td><td ><p class="centerAlign"><img src="images/repeater-modeldata.png" alt="" /></p></td></tr>
</table>
<p>If the <a href="qml-repeater.html#model-prop">model</a> is a model object (such as a <a href="qml-listmodel.html">ListModel</a>) the delegate can access all model roles as named properties, in the same way that delegates do for view classes like <a href="qml-listview.html">ListView</a>.</p>
<p><b>See also </b><a href="qdeclarativemodels.html">QML Data Models</a>.</p>
</div></div><!-- @@@delegate -->
<br/>
<!-- $$$model -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="model-prop"></a><span class="name">model</span> : <span class="type">any</span></p></td></tr></table></div><div class="qmldoc"><p>The model providing data for the repeater.</p>
<p>This property can be set to any of the supported <a href="qdeclarativemodels.html#qmlmodels">data models</a>:</p>
<ul>
<li>A number that indicates the number of delegates to be created by the repeater</li>
<li>A model (e.g. a <a href="qml-listmodel.html">ListModel</a> item, or a <a href="qabstractitemmodel.html">QAbstractItemModel</a> subclass)</li>
<li>A string list</li>
<li>An object list</li>
</ul>
<p>The type of model affects the properties that are exposed to the <a href="qml-repeater.html#delegate-prop">delegate</a>.</p>
<p><b>See also </b><a href="qdeclarativemodels.html#qmlmodels">Data Models</a>.</p>
</div></div><!-- @@@model -->
<br/>
<h2>Signal Handler Documentation</h2>
<!-- $$$onItemAdded -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onItemAdded-signal"></a>Repeater::<span class="name">onItemAdded</span> ( <span class="type"><a href="qml-int.html">int</a></span> <i>index</i>, <span class="type"><a href="qml-item.html">Item</a></span> <i>item</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when an item is added to the repeater. The <i>index</i> parameter holds the index at which the item has been inserted within the repeater, and the <i>item</i> parameter holds the <a href="qml-item.html">Item</a> that has been added.</p>
<p>This documentation was introduced in QtQuick 1.1.</p>
</div></div><!-- @@@onItemAdded -->
<br/>
<!-- $$$onItemRemoved -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onItemRemoved-signal"></a>Repeater::<span class="name">onItemRemoved</span> ( <span class="type"><a href="qml-int.html">int</a></span> <i>index</i>, <span class="type"><a href="qml-item.html">Item</a></span> <i>item</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when an item is removed from the repeater. The <i>index</i> parameter holds the index at which the item was removed from the repeater, and the <i>item</i> parameter holds the <a href="qml-item.html">Item</a> that was removed.</p>
<p>Do not keep a reference to <i>item</i> if it was created by this repeater, as in these cases it will be deleted shortly after the handler is called.</p>
<p>This documentation was introduced in QtQuick 1.1.</p>
</div></div><!-- @@@onItemRemoved -->
<br/>
<h2>Method Documentation</h2>
<!-- $$$itemAt -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="itemAt-method"></a><span class="type"><a href="qml-item.html">Item</a></span> Repeater::<span class="name">itemAt</span> ( <span class="type">index</span> )</p></td></tr></table></div><div class="qmldoc"><p>Returns the <a href="qml-item.html">Item</a> that has been created at the given <i>index</i>, or <tt>null</tt> if no item exists at <i>index</i>.</p>
<p>This documentation was introduced in QtQuick 1.1.</p>
</div></div><!-- @@@itemAt -->
<br/>
<p class="naviNextPrevious footerNavi">
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
