feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: describe available positioning methods in one place

Browse Source 
Move information about positioning from the "Using Qt Quick
Designer" topic to the "Creating Screens" topic.
Arrange the information in the same way as in the Qt Reference
Documentation. Add information about "Using Layouts" and
"Using Split Views".

Change-Id: I0f940b5f578d5f52e787ef83d230a67efb158a4d
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>
This commit is contained in:
Leena Miettinen
2013-11-12 15:17:52 +01:00
parent 1bb93fe5b1
commit a22ebf5336
3 changed files with 160 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/images/qmldesigner-set-expression.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 16 KiB

doc/src/qtquick/qtquick-designer.qdoc
+4 -83
View File
@@ -229,29 +229,6 @@
\li The type is explicitly set to hidden.
\endtable
\section2 Setting Expressions
\l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-propertybinding.html}
{Property binding} is a
declarative way of specifying the value of a property.
Binding allows a property value to be expressed as an JavaScript expression
that defines the value relative to other property values or data accessible
in the application. The property value is automatically kept up to date if
the other properties or data values change.
Property bindings are created implicitly in QML whenever a property is
assigned a JavaScript expression. To set JavaScript expressions as values of
properties in \QMLD, click the circle icon next to a property to open a
context menu, and select \gui {Set Expression}.
\image qmldesigner-set-expression.png "Type properties context menu"
To remove expressions, select \gui Reset in the context menu.
For more information on the JavaScript environment provided by QML, see
\l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-javascript-topic.html}
{Integrating QML and JavaScript}.
\section2 Marking Text Items for Translation
To support translators, mark each text item that should be translated.
@@ -350,59 +327,6 @@
}
\endqml
\section2 Setting Anchors and Margins
In addition to arranging QML types in a grid, row, or column, you can use
\l{http://qt-project.org/doc/qt-5.0/qtquick/qtquick-positioning-anchors.html}{anchors}
to lay out screens. In an anchor-based layout, each QML type can be thought of as having a
set of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
center, vertical center, and baseline.
In the \gui Layout pane you can set anchors and margins for items. To set
the anchors of an item, click the anchor buttons. You can combine the
top/bottom, left/right, and horizontal/vertical anchors to anchor items in
the corners of the parent item or center them horizontally or vertically
within the parent item.
\image qmldesigner-anchor-buttons.png "Anchor buttons"
Specifying the baseline anchor in Qt Quick Designer is
not supported. You can specify it using the code editor.
For performance reasons, you can only anchor an item to its siblings and
direct parent. By default, an item is anchored to its parent when you
use the anchor buttons. Select a sibling of the item in the \gui Target
field to anchor to it, instead.
Arbitrary anchoring is not supported. For example, you cannot specify:
\c {anchor.left: parent.right}. You have to specify: \c {anchor.left: parent.left}.
When you use the anchor buttons, anchors to the parent item are always
specified to the same side. However, anchors to sibling items are specified
to the opposite side: \c {anchor.left: sibling.right}. This allows you to keep
sibling items together.
In the following image, \gui{Rectangle 2} is anchored to \gui{Rectangle 1}
on its left and to the bottom of its parent.
\image qmldesigner-anchors.png "Anchoring sibling items"
The anchors for \gui{Rectangle 2} are specified as follows in code:
\qml
Rectangle {
id: rectangle2
anchors.left: rectangle1.right
anchors.leftMargin: 15
anchors.bottom: parent.bottom
anchors.bottomMargin: 15
//
}
\endqml
Margins specify the amount of empty space to leave to the outside of an item.
Margins only have meaning for anchors. They do not take any effect when using
other layouts or absolute positioning.
\section2 Building Transformations on Items
The \gui Advanced pane allows you to configure advanced transformations,
@@ -471,12 +395,9 @@
For more information on adding animation, see \l{Animating Screens}.
\section1 Aligning and Positioning QML Types
\section1 Working with QML Types on Canvas
The position of an item on the canvas can be either absolute or relative
to other items. In the item properties, you can set the x and y
coordinates of an item, or \l{Setting Anchors and Margins}{anchor} it to
its parent and sibling items.
You design applications on the canvas by placing items on it.
\section2 Snapping to Parent and Sibling Items
@@ -533,13 +454,13 @@
\image qmldesigner-preview-size.png "Canvas width and height"
\section1 Specifying Canvas Size
\section2 Specifying Canvas Size
To change the canvas size, select \gui {Tools > Options > Qt Quick
> Qt Quick Designer} and
specify the canvas width and height in the \gui Canvas group.
\section1 Refreshing the Canvas
\section2 Refreshing the Canvas
When you open QML files in \QMLD, the items in the file are drawn on
the canvas. When you edit the item properties in \QMLD, the QML file and
doc/src/qtquick/qtquick-screens.qdoc
+156 -1
View File
@@ -87,7 +87,117 @@
\section1 Positioning Items on Screens
You can use the following QML types to arrange items on screens:
The position of an item on the canvas can be either absolute or relative
to other items. If you are designing a static user interface,
\l{http://dev.qt-project.org/doc/qt-5.0/qtquick-positioning-topic.html#manual-positioning}
{manual positioning} provides the most efficient form of positioning items
on the screen. For a dynamic user interface, you can employ the following
positioning methods provided by Qt Quick:
\list
\li \l{Setting Bindings}
\li \l{Setting Anchors and Margins}
\li \l{Using Positioners}
\li \l{Using Layouts}
\li \l{Using Split Views}
\endlist
\section2 Setting Bindings
\l{http://qt-project.org/doc/qt-5.0/qtquick-positioning-topic.html#positioning-with-bindings}
{Property binding} is a declarative way of specifying the value of a property.
Binding allows a property value to be expressed as an JavaScript expression
that defines the value relative to other property values or data accessible
in the application. The property value is automatically kept up to date if
the other properties or data values change.
Property bindings are created implicitly in QML whenever a property is
assigned a JavaScript expression. To set JavaScript expressions as values of
properties in \QMLD, click the circle icon next to a property to open a
context menu, and select \gui {Set Binding}.
\image qmldesigner-set-expression.png "Type properties context menu"
To remove bindings, select \gui Reset in the context menu.
For more information on the JavaScript environment provided by QML, see
\l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-javascript-topic.html}
{Integrating QML and JavaScript}.
\QMLD cannot show bindings and using them might have a negative impact on
performance, so consider setting anchors and margins for items, instead.
For example, instead of setting \c {parent.width} for an item, you could
anchor the item to its sibling items on the left and the right.
\section2 Setting Anchors and Margins
In an
\l{http://qt-project.org/doc/qt-5.0/qtquick-positioning-anchors.html}
{anchor-based} layout, each QML type can be thought of as having a set of
invisible \e anchor lines: top, bottom, left, right, fill, horizontal
center, vertical center, and baseline.
In the \gui Layout pane you can set anchors and margins for items. To set
the anchors of an item, click the anchor buttons. You can combine the
top/bottom, left/right, and horizontal/vertical anchors to anchor items in
the corners of the parent item or center them horizontally or vertically
within the parent item.
\image qmldesigner-anchor-buttons.png "Anchor buttons"
Specifying the baseline anchor in \QMLD is not supported. You can specify it
using the code editor.
For performance reasons, you can only anchor an item to its siblings and
direct parent. By default, an item is anchored to its parent when you
use the anchor buttons. Select a sibling of the item in the \gui Target
field to anchor to it, instead.
Arbitrary anchoring is not supported. For example, you cannot specify:
\c {anchor.left: parent.right}. You have to specify: \c {anchor.left: parent.left}.
When you use the anchor buttons, anchors to the parent item are always
specified to the same side. However, anchors to sibling items are specified
to the opposite side: \c {anchor.left: sibling.right}. This allows you to keep
sibling items together.
In the following image, \gui{Rectangle 2} is anchored to \gui{Rectangle 1}
on its left and to the bottom of its parent.
\image qmldesigner-anchors.png "Anchoring sibling items"
The anchors for \gui{Rectangle 2} are specified as follows in code:
\qml
Rectangle {
id: rectangle2
anchors.left: rectangle1.right
anchors.leftMargin: 15
anchors.bottom: parent.bottom
anchors.bottomMargin: 15
//
}
\endqml
Margins specify the amount of empty space to leave to the outside of an item.
Margins only have meaning for anchors. They do not take any effect when using
other layouts or absolute positioning.
\section2 Using Positioners
\l{http://qt-project.org/doc/qt-5.0/qtquick-positioning-layouts.html}
{Positioner items} are container items that manage the positions of items in
a declarative user interface. Positioners behave in a similar way to the
layout managers used with standard Qt widgets, except that they are also
containers in their own right.
You can use the following positioners to arrange items on screens:
\list
@@ -110,6 +220,51 @@
the items on the canvas, and then select \gui Layout in the context
menu.
\section2 Using Layouts
From Qt 5.1, you can use QML types in the
\l{http://qt-project.org/doc/qt-5.1/qtquicklayouts/qtquicklayouts-index.html}
{Qt Quick Layouts module} to arrange Qt Quick items on screens. Unlike p
ositioners, they manage both the positions and sizes of items in a
declarative interface. They are well suited for resizable user interfaces.
You can use the following layout types to arrange items on screens:
\list
\li \l{http://qt-project.org/doc/qt-5.0/qml-qtquick-layouts-layout.html}
{Layout} provides attached properties for items pushed onto a
\gui {Column Layout}, \gui {Row Layout}, or \gui {Grid Layout}.
\li \l{http://qt-project.org/doc/qt-5.0/qml-qtquick-layouts-columnlayout.html}
{Column Layout} provides a grid layout with only one column.
\li \l{http://qt-project.org/doc/qt-5.0/qml-qtquick-layouts-rowlayout.html}
{Row Layout} provides a grid layout with only one row.
\li \l{http://qt-project.org/doc/qt-5.0/qml-qtquick-layouts-gridlayout.html}
{Grid Layout} provides a way of dynamically arranging items in a
grid.
\endlist
To lay out several items in a \gui {Column Layout}, \gui {Row Layout}, or
\gui {Grid Layout}, select the items on the canvas, and then select
\gui Layout in the context menu.
To make an item within a layout as wide as possible while respecting the
given constraints, select the item on the canvas and then select
\gui Layout > \gui {Fill Width} in the context menu. To make the item as
high as possible, select \gui {Fill Height}.
\section2 Using Split Views
From Qt 5.1, you can use the
\l{http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-splitview.html}
{Split View} Qt Quick Control to arrange items horizontally or vertically
with a draggable splitter between each item.
\section1 Using States
Use states and transitions to navigate between screens.