aboutsummaryrefslogtreecommitdiffstats
path: root/src/quick/doc/src/appdevguide/usecases/layouts.qdoc
diff options
context:
space:
mode:
Diffstat (limited to 'src/quick/doc/src/appdevguide/usecases/layouts.qdoc')
-rw-r--r--src/quick/doc/src/appdevguide/usecases/layouts.qdoc36
1 files changed, 36 insertions, 0 deletions
diff --git a/src/quick/doc/src/appdevguide/usecases/layouts.qdoc b/src/quick/doc/src/appdevguide/usecases/layouts.qdoc
index a32b8b527f..cf059e9186 100644
--- a/src/quick/doc/src/appdevguide/usecases/layouts.qdoc
+++ b/src/quick/doc/src/appdevguide/usecases/layouts.qdoc
@@ -28,4 +28,40 @@
\page qtquick-usecase-layouts.html
\title Use Case - Layouts In QML
\brief Example of how to create layouts for visual elements in a QML application
+
+There are several ways to position items in QML, including simple property bindings.
+
+\section1 Manual Positioning
+
+Items can be placed at specific x,y coordinates on the screen by setting their x,y properties. This will setup their
+position relative to the top left corner of their parent, for more detail see \c {Visual Canvas}.
+
+Combined with using bindings instead of constant valudes for these properties, relative positioning is also easily
+accomplished by setting the x and y coordinates to the appropriate bindings.
+
+\snippet qml/usecases/layouts.qml direct
+
+\section1 Anchors
+
+The \c Item type provides the abilitiy to anchor to other Item types. There are six anchor lines for each item: left,
+right, vertical center, top, bottom and horizontal center. The three vertical anchor lines can be anchored to any of
+the three vertical anchor lines of another item, and the three horizontal anchor lines can be anchored to the
+horizontal anchor lines of another item.
+
+For full details, see the documentation of the \l{Item::anchors}{anchors property}.
+
+\snippet qml/usecases/layouts.qml anchors
+
+\section1 Positioners
+
+For the common case of wanting to position a set of elements in a regular pattern, QtQuick provides some Positioner
+types. Items placed in a positioner are automatically positioned in some way, for example a Row positions items to be
+horizontally adjacent (forming a row).
+
+For full details see the documentation for \l{qtquick-qmltypereference.html#positioning}{the positioner types}.
+
+\snippet qml/usecases/layouts.qml positioners
+
+\image qml-uses-layouts.png
+
*/