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
113
114
115
116
117
118
119
120
121
122
|
<?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" />
<!-- qdeclarativeitem.cpp -->
<title>Qt 4.8: QML LayoutMirroring Element</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<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 LayoutMirroring Element</li>
</ul>
</div>
</div>
<div class="content mainContent">
<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>
</ul>
</div>
<h1 class="title">QML LayoutMirroring Element</h1>
<span class="subtitle"></span>
<!-- $$$LayoutMirroring-brief -->
<p>The LayoutMirroring attached property is used to mirror layout behavior. <a href="#details">More...</a></p>
<!-- @@@LayoutMirroring -->
<p>This element was introduced in QtQuick 1.1.</p>
<ul>
<li><a href="qml-layoutmirroring-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-layoutmirroring.html#childrenInherit-prop">childrenInherit</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-layoutmirroring.html#enabled-prop">enabled</a></b></b> : bool</li>
</ul>
<!-- $$$LayoutMirroring-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>The LayoutMirroring attached property is used to horizontally mirror <a href="qml-anchor-layout.html#anchor-layout">Item anchors</a>, <a href="qml-positioners.html">positioner</a> elements (such as <a href="qml-row.html">Row</a> and <a href="qml-grid.html">Grid</a>) and views (such as <a href="qml-gridview.html">GridView</a> and horizontal <a href="qml-listview.html">ListView</a>). Mirroring is a visual change: left anchors become right anchors, and positioner elements like <a href="qml-grid.html">Grid</a> and <a href="qml-row.html">Row</a> reverse the horizontal layout of child items.</p>
<p>Mirroring is enabled for an item by setting the <a href="qml-layoutmirroring.html#enabled-prop">enabled</a> property to true. By default, this only affects the item itself; setting the <a href="qml-layoutmirroring.html#childrenInherit-prop">childrenInherit</a> property to true propagates the mirroring behavior to all child elements as well. If the <tt>LayoutMirroring</tt> attached property has not been defined for an item, mirroring is not enabled.</p>
<p>The following example shows mirroring in action. The <a href="qml-row.html">Row</a> below is specified as being anchored to the left of its parent. However, since mirroring has been enabled, the anchor is horizontally reversed and it is now anchored to the right. Also, since items in a <a href="qml-row.html">Row</a> are positioned from left to right by default, they are now positioned from right to left instead, as demonstrated by the numbering and opacity of the items:</p>
<pre class="qml"> import QtQuick 1.1
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">LayoutMirroring</span>.enabled: <span class="number">true</span>
<span class="name">LayoutMirroring</span>.childrenInherit: <span class="number">true</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="name">color</span>: <span class="string">"yellow"</span>
<span class="name">border</span>.width: <span class="number">1</span>
<span class="type"><a href="qml-row.html">Row</a></span> {
<span class="type">anchors</span> { <span class="name">left</span>: <span class="name">parent</span>.<span class="name">left</span>; <span class="name">margins</span>: <span class="number">5</span> }
<span class="name">y</span>: <span class="number">5</span>; <span class="name">spacing</span>: <span class="number">5</span>
<span class="type"><a href="qml-repeater.html">Repeater</a></span> {
<span class="name">model</span>: <span class="number">5</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">opacity</span>: (<span class="number">5</span> <span class="operator">-</span> <span class="name">index</span>) <span class="operator">/</span> <span class="number">5</span>
<span class="name">width</span>: <span class="number">40</span>; <span class="name">height</span>: <span class="number">40</span>
<span class="type"><a href="qml-text.html">Text</a></span> {
<span class="name">text</span>: <span class="name">index</span> <span class="operator">+</span> <span class="number">1</span>
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
}
}
}
}
}</pre>
<p class="centerAlign"><img src="images/layoutmirroring.png" alt="" /></p><p>Layout mirroring is useful when it is necessary to support both left-to-right and right-to-left layout versions of an application to target different language areas. The <a href="qml-layoutmirroring.html#childrenInherit-prop">childrenInherit</a> property allows layout mirroring to be applied without manually setting layout configurations for every item in an application. Keep in mind, however, that mirroring does not affect any positioning that is defined by the <a href="qml-item.html">Item</a> <a href="qml-item.html#x-prop">x</a> coordinate value, so even with mirroring enabled, it will often be necessary to apply some layout fixes to support the desired layout direction. Also, it may be necessary to disable the mirroring of individual child items (by setting <a href="qml-layoutmirroring.html#enabled-prop">LayoutMirroring.enabled</a> to false for such items) if mirroring is not the desired behavior, or if the child item already implements mirroring in some custom way.</p>
<p>See <a href="qml-righttoleft.html">QML Right-to-left User Interfaces</a> for further details on using <tt>LayoutMirroring</tt> and other related features to implement right-to-left support for an application.</p>
<!-- @@@LayoutMirroring -->
<h2>Property Documentation</h2>
<!-- $$$childrenInherit -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="childrenInherit-prop"></a><span class="name">childrenInherit</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the <a href="qml-layoutmirroring.html#enabled-prop">LayoutMirroring.enabled</a> value for this item is inherited by its children.</p>
<p>The default value is false.</p>
</div></div><!-- @@@childrenInherit -->
<br/>
<!-- $$$enabled -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="enabled-prop"></a><span class="name">enabled</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the item's layout is mirrored horizontally. Setting this to true horizontally reverses <a href="qml-anchor-layout.html#anchor-layout">anchor</a> settings such that left anchors become right, and right anchors become left. For <a href="qml-positioners.html">positioner</a> elements (such as <a href="qml-row.html">Row</a> and <a href="qml-grid.html">Grid</a>) and view elements (such as <a href="qml-gridview.html">GridView</a> and <a href="qml-listview.html">ListView</a>) this also mirrors the horizontal layout direction of the item.</p>
<p>The default value is false.</p>
</div></div><!-- @@@enabled -->
<br/>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation 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>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
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>
</body>
</html>
|
