src/quick/doc/src/appdevguide/usecases/layouts.qdoc

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the documentation of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:FDL$
   9 ** GNU Free Documentation License
  10 ** Alternatively, this file may be used under the terms of the GNU Free
  11 ** Documentation License version 1.3 as published by the Free Software
  12 ** Foundation and appearing in the file included in the packaging of
  13 ** this file.
  14 **
  15 ** Other Usage
  16 ** Alternatively, this file may be used in accordance with the terms
  17 ** and conditions contained in a signed written agreement between you
  18 ** and Nokia.
  19 **
  20 **
  21 **
  22 **
  23 **
  24 ** $QT_END_LICENSE$
  25 **
  26 ****************************************************************************/
  27 /*!
  28 \page qtquick-usecase-layouts.html
  29 \title Use Case - Layouts In QML
  30 \brief Example of how to create layouts for visual elements in a QML application
  31
  32 There are several ways to position items in QML.
  33
  34 Below is a brief overview. For more details, see \l {Important Concepts In Qt Quick - Positioning}.
  35
  36 \section1 Manual Positioning
  37
  38 Items can be placed at specific x,y coordinates on the screen by setting their x,y properties. This will
  39 setup their position relative to the top left corner of their parent, according to the
  40 \l {Concepts - Visual Coordinates in Qt Quick}{visual coordinate system} rules.
  41
  42 Combined with using \l{Property Binding}{bindings} instead of constant valudes for these properties, relative positioning is also easily
  43 accomplished by setting the x and y coordinates to the appropriate bindings.
  44
  45 \snippet qml/usecases/layouts.qml import
  46 \snippet qml/usecases/layouts.qml direct
  47
  48 \image qml-uses-layouts-direct.png
  49
  50
  51 \section1 Anchors
  52
  53 The \c Item type provides the abilitiy to anchor to other \l Item types. There are six anchor lines for each item: \e left,
  54 \e right, \e{vertical center}, \e top, \e bottom and \e{horizontal center}. The three vertical anchor lines can be anchored to any of
  55 the three vertical anchor lines of another item, and the three horizontal anchor lines can be anchored to the
  56 horizontal anchor lines of another item.
  57
  58 For full details, see \l {Positioning with Anchors} and the documentation of the \l{Item::anchors.top}{anchors property}.
  59
  60 \snippet qml/usecases/layouts.qml import
  61 \snippet qml/usecases/layouts.qml anchors
  62
  63 \image qml-uses-layouts-anchors.png
  64
  65
  66 \section1 Positioners
  67
  68 For the common case of wanting to position a set of elements in a regular pattern, QtQuick provides some positioner
  69 types. Items placed in a positioner are automatically positioned in some way; for example, a \l Row positions items to be
  70 horizontally adjacent (forming a row).
  71
  72 For full details see \l {Item Layouts} and the documentation for \l{qtquick-qmltypereference.html#positioning}{the positioner types}.
  73
  74 \snippet qml/usecases/layouts.qml import
  75 \snippet qml/usecases/layouts.qml positioners
  76
  77 \image qml-uses-layouts-positioners.png
  78
  79 */