/usr/share/qt5/doc/qtquick/qtquick-positioning-topic.html is in qtdeclarative5-doc-html 5.5.1-2ubuntu6.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- topic.qdoc -->
<title>Important Concepts In Qt Quick - Positioning | Qt Quick 5.5</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.5</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Important Concepts In Qt Quick - Positioning</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</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="#manual-positioning">Manual Positioning</a></li>
<li class="level1"><a href="#positioning-with-bindings">Positioning With Bindings</a></li>
<li class="level1"><a href="#anchors">Anchors</a></li>
<li class="level1"><a href="#positioners">Positioners</a></li>
<li class="level1"><a href="#layouts">Layouts</a></li>
<li class="level1"><a href="#right-to-left-support">Right-To-Left Support</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Important Concepts In Qt Quick - Positioning</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-positioning-topic.html-description -->
<div class="descr"> <a name="details"></a>
<p>Visual items in QML can be positioned in a variety of ways. The most important positioning-related concept is that of anchoring, a form of relative positioning where items can be anchored (or attached) to each other at certain boundaries. Other positioning concepts include absolute positioning, positioning with coordinate bindings, positioners, and layouts.</p>
<a name="manual-positioning"></a>
<h2 id="manual-positioning">Manual Positioning</h2>
<p>Items can be positioned manually. If the user-interface is going to be static, manual positioning provides the most efficient form of positioning.</p>
<p>In any user-interface, the visual types exist at a particular location in the screen coordinates at any instant in time. While fluidly animated and dynamic user-interfaces are a major focus of Qt Quick, statically-positioned user interfaces are still a viable option. What's more, if the position of those types does not change, it can often be more performant to specify the position manually than to use the more dynamic positioning methods documented in proceeding sections.</p>
<p>In Qt Quick, every visual object is positioned within the <a href="qtquick-visualcanvas-coordinates.html">coordinate system</a> provided by the Qt Quick visual canvas. As described in that document, the x and y coordinates of a visual object are relative to those of its visual parent, with the top-left corner having the coordinate (0, 0).</p>
<p>Thus, the following example will display two rectangles positioned manually:</p>
<div class="table"><table class="generic">
<thead><tr class="qt-style"><th >Example Code</th><th >Resultant Layout</th></tr></thead>
<tr valign="top" class="odd"><td ><pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">50</span>
<span class="name">y</span>: <span class="number">50</span>
<span class="name">width</span>: <span class="number">100</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"green"</span>
}
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">100</span>
<span class="name">y</span>: <span class="number">100</span>
<span class="name">width</span>: <span class="number">50</span>
<span class="name">height</span>: <span class="number">50</span>
<span class="name">color</span>: <span class="string">"yellow"</span>
}
}</pre>
</td><td ><p class="centerAlign"><img src="images/manual-layout.png" alt="" /></p></td></tr>
</table></div>
<a name="positioning-with-bindings"></a>
<h2 id="positioning-with-bindings">Positioning With Bindings</h2>
<p>Items may also be positioned by assigning binding expressions to the properties associated with their location in the visual canvas. This type of positioning is the most highly dynamic, however some performance cost is associated with positioning items in this manner.</p>
<p>The position and dimensions of a visual object can also be set through property bindings. This has the advantage that the values will automatically be updated as the dependencies of the bindings change. For example, the width of one Rectangle might depend on the width of the Rectangle next to it.</p>
<p>While bindings provide a very flexible and intuitive way of creating dynamic layouts, it should be noted that there is some performance cost associated with them, and where possible, pristine Anchor layouts should be preferred.</p>
<a name="anchors"></a>
<h2 id="anchors">Anchors</h2>
<p>Anchors allows an item to be placed either adjacent to or inside of another, by attaching one or more of the item's anchor-points (boundaries) to an anchor-point of the other. These anchors will remain even if the dimensions or location of one of the items changes, allowing for highly dynamic user-interfaces.</p>
<p>A visual object can be thought of as having various anchor-points (or more correctly, anchor-lines). Other items can be anchored to those points, which means that as any object changes, the other objects which are anchored to it will adjust automatically to maintain the anchoring.</p>
<p>Qt Quick provides anchors as a top-level concept. See the documentation about <a href="qtquick-positioning-anchors.html">positioning with anchors</a> for in-depth information on the topic.</p>
<p>It is important to note that anchor-based layouts are generally far more performant than binding-based layouts, if pristine. A "pristine" anchor layout is one which uses only anchors (with object nesting) to determine the positioning, whereas a "contaminated" anchor layout is one which uses both anchoring and bindings (either on position-related [x,y] properties or on dimension-related [width,height] properties) to determine the position.</p>
<a name="positioners"></a>
<h2 id="positioners">Positioners</h2>
<p>Qt Quick also provides some built-in positioner items. For many use cases, the best positioner to use is a simple grid, row, or column, and Qt Quick provides items which will position children in these formations in the most efficient manner possible. See the documentation on <a href="qtquick-positioning-layouts.html">item positioners types</a> for more information about utilizing pre-defined positioners.</p>
<a name="layouts"></a>
<h2 id="layouts">Layouts</h2>
<p>From Qt 5.1, the module Qt Quick Layouts can also be used to arrange Qt Quick items in a user interface. Unlike positioners, the types in Qt Quick Layouts manage both the positions and sizes of items in a declarative interface. They are well suited for resizable user interfaces.</p>
<a name="right-to-left-support"></a>
<h2 id="right-to-left-support">Right-To-Left Support</h2>
<p>The directionality of the written form of a language often has a great impact on how the visual types of a user-interface should be positioned. Qt Quick supports right-to-left positioning of types through the predefined-layouts as well as right-to-left text layouts.</p>
<p>Please see the documentation about <a href="qtquick-positioning-righttoleft.html">right-to-left support in Qt Quick</a> for in-depth information on the topic.</p>
</div>
<!-- @@@qtquick-positioning-topic.html -->
</div>
</div>
</div>
</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.<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>
|