<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qqmllistmodel.cpp -->
<title>ListElement QML Type | Qt QML 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtqml-index.html">Qt QML</a></td><td ><a href="qtqml-qmlmodule.html">QML Types</a></td><td >ListElement QML Type</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#referencing-roles">Referencing Roles</a></li>
<li class="level2"><a href="#example-usage">Example Usage</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">ListElement QML Type</h1>
<span class="subtitle"></span>
<!-- $$$ListElement-brief -->
<p>Defines a data item in a <a href="qml-qtqml-models-listmodel.html">ListModel</a> <a href="#details">More...</a></p>
<!-- @@@ListElement -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQml.Models 2.2</td></tr></table></div><ul>
<li><a href="qml-qtqml-models-listelement-members.html">List of all members, including inherited members</a></li>
</ul>
<!-- $$$ListElement-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>List elements are defined inside <a href="qml-qtqml-models-listmodel.html">ListModel</a> definitions, and represent items in a list that will be displayed using ListView or Repeater items.</p>
<p>List elements are defined like other QML elements except that they contain a collection of <i>role</i> definitions instead of properties. Using the same syntax as property definitions, roles both define how the data is accessed and include the data itself.</p>
<p>The names used for roles must begin with a lower-case letter and should be common to all elements in a given model. Values must be simple constants; either strings (quoted and optionally within a call to QT_TR_NOOP), boolean values (true, false), numbers, or enumeration values (such as AlignText.AlignHCenter).</p>
<a name="referencing-roles"></a>
<h2 id="referencing-roles">Referencing Roles</h2>
<p>The role names are used by delegates to obtain data from list elements. Each role name is accessible in the delegate's scope, and refers to the corresponding role in the current element. Where a role name would be ambiguous to use, it can be accessed via the model property (e.g., <code>model.cost</code> instead of <code>cost</code>).</p>
<a name="example-usage"></a>
<h2 id="example-usage">Example Usage</h2>
<p>The following model defines a series of list elements, each of which contain "name" and "cost" roles and their associated values.</p>
<pre class="qml">
<span class="type"><a href="qml-qtqml-models-listmodel.html">ListModel</a></span> {
<span class="name">id</span>: <span class="name">fruitModel</span>
<span class="type"><a href="qml-qtqml-models-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Apple"</span>
<span class="name">cost</span>: <span class="number">2.45</span>
}
<span class="type"><a href="qml-qtqml-models-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Orange"</span>
<span class="name">cost</span>: <span class="number">3.25</span>
}
<span class="type"><a href="qml-qtqml-models-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Banana"</span>
<span class="name">cost</span>: <span class="number">1.95</span>
}
}
</pre>
<p>The delegate obtains the name and cost for each element by simply referring to <code>name</code> and <code>cost</code>:</p>
<pre class="qml">
<span class="type">ListView</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">fruitModel</span>
<span class="name">delegate</span>: <span class="name">Row</span> {
<span class="type">Text</span> { <span class="name">text</span>: <span class="string">"Fruit: "</span> <span class="operator">+</span> <span class="name">name</span> }
<span class="type">Text</span> { <span class="name">text</span>: <span class="string">"Cost: $"</span> <span class="operator">+</span> <span class="name">cost</span> }
}
}
</pre>
<p><b>See also </b><a href="qml-qtqml-models-listmodel.html">ListModel</a>.</p>
<!-- @@@ListElement -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> 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.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
