<?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" />
<!-- qdeclarativepositioners.cpp -->
<title>Qt 4.8: QML Column 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 Column 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="#details">Detailed Description</a></li>
<li class="level2"><a href="#example-usage">Example Usage</a></li>
<li class="level2"><a href="#using-transitions">Using Transitions</a></li>
<li class="level2"><a href="#limitations">Limitations</a></li>
</ul>
</div>
<h1 class="title">QML Column Element</h1>
<span class="subtitle"></span>
<!-- $$$Column-brief -->
<p>The Column item arranges its children vertically. <a href="#details">More...</a></p>
<!-- @@@Column -->
<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-column-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-column.html#add-prop">add</a></b></b> : Transition</li>
<li class="fn"><b><b><a href="qml-column.html#move-prop">move</a></b></b> : Transition</li>
<li class="fn"><b><b><a href="qml-column.html#spacing-prop">spacing</a></b></b> : int</li>
</ul>
<!-- $$$Column-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>The Column item positions its child items so that they are vertically aligned and not overlapping.</p>
<p>Spacing between items can be added using the <a href="qml-column.html#spacing-prop">spacing</a> property. Transitions can be used for cases where items managed by a Column are added or moved. These are stored in the <a href="qml-column.html#add-prop">add</a> and <a href="qml-column.html#move-prop">move</a> properties respectively.</p>
<p>See <a href="qml-positioners.html">Using QML Positioner and Repeater Items</a> for more details about this item and other related items.</p>
<a name="example-usage"></a>
<h2>Example Usage</h2>
<p>The following example positions differently shaped rectangles using a Column item.</p>
<p class="centerAlign"><img src="images/verticalpositioner_example.png" alt="" /></p><pre class="qml"> <span class="type">Column</span> {
<span class="name">spacing</span>: <span class="number">2</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"red"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"green"</span>; <span class="name">width</span>: <span class="number">20</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"blue"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">20</span> }
}</pre>
<a name="using-transitions"></a>
<h2>Using Transitions</h2>
<p>Transitions can be used to animate items that are added to, moved within, or removed from a Column item. The <a href="qml-column.html#add-prop">add</a> and <a href="qml-column.html#move-prop">move</a> properties can be set to the transitions that will be applied when items are added to, removed from, or re-positioned within a Column item.</p>
<p>The use of transitions with positioners is described in more detail in the <a href="qml-positioners.html#using-transitions">Using QML Positioner and Repeater Items</a> document.</p>
<p class="centerAlign"><img src="images/verticalpositioner_transition.gif" alt="" /></p><pre class="qml"> <span class="type">Column</span> {
<span class="name">spacing</span>: <span class="number">2</span>
<span class="name">add</span>: <span class="name">Transition</span> {
<span class="comment">// Define an animation for adding a new item...</span>
}
<span class="name">move</span>: <span class="name">Transition</span> {
<span class="comment">// Define an animation for moving items within the column...</span>
}
<span class="comment">// ...</span>
}</pre>
<a name="limitations"></a>
<h2>Limitations</h2>
<p>Note that the positioner assumes that the x and y positions of its children will not change. If you manually change the x or y properties in script, bind the x or y properties, use anchors on a child of a positioner, or have the height of a child depend on the position of a child, then the positioner may exhibit strange behavior. If you need to perform any of these actions, consider positioning the items without the use of a Column.</p>
<p>Items with a width or height of 0 will not be positioned.</p>
<p><b>See also </b><a href="qml-row.html">Row</a>, <a href="qml-grid.html">Grid</a>, <a href="qml-flow.html">Flow</a>, and <a href="declarative-positioners.html">Positioners example</a>.</p>
<!-- @@@Column -->
<h2>Property Documentation</h2>
<!-- $$$add -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="add-prop"></a><span class="name">add</span> : <span class="type"><a href="qml-transition.html">Transition</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the transition to be applied when adding an item to the positioner. The transition will only be applied to the added item(s). Positioner transitions will only affect the position (x, y) of items.</p>
<p>For a positioner, adding an item can mean that either the object has been created or reparented, and thus is now a child or the positioner, or that the object has had its opacity increased from zero, and thus is now visible.</p>
<p><b>See also </b><a href="qml-column.html#move-prop">move</a>.</p>
</div></div><!-- @@@add -->
<br/>
<!-- $$$move -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="move-prop"></a><span class="name">move</span> : <span class="type"><a href="qml-transition.html">Transition</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the transition to apply when moving an item within the positioner. Positioner transitions will only affect the position (x, y) of items.</p>
<p>This transition can be performed when other items are added or removed from the positioner, or when items resize themselves.</p>
<p class="centerAlign"><img src="images/positioner-move.gif" alt="" /></p><pre class="qml"> <span class="type"><a href="qml-column.html">Column</a></span> {
<span class="name">move</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> {
<span class="name">properties</span>: <span class="string">"y"</span>
<span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>
}
}
}</pre>
<p><b>See also </b><a href="qml-column.html#add-prop">add</a> and <a href="declarative-positioners.html">Positioners example</a>.</p>
</div></div><!-- @@@move -->
<br/>
<!-- $$$spacing -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="spacing-prop"></a><span class="name">spacing</span> : <span class="type"><a href="qml-int.html">int</a></span></p></td></tr></table></div><div class="qmldoc"><p>The spacing is the amount in pixels left empty between adjacent items. The default spacing is 0.</p>
<p><b>See also </b><a href="qml-grid.html#spacing-prop">Grid::spacing</a>.</p>
</div></div><!-- @@@spacing -->
<br/>
<p class="naviNextPrevious footerNavi">
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
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>
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. <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>
