layouts.qdoc

/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia.  For licensing terms and
** conditions see http://qt.digia.com/licensing.  For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file.  Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquick-usecase-layouts.html
\title Use Case - Positioners and Layouts In QML
\brief Example of how to create layouts for visual components in a QML application

There are several ways to position items in QML.

Below is a brief overview. For more details, see \l {Important Concepts In Qt Quick - Positioning}.

\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, according to the
\l {Concepts - Visual Coordinates in Qt Quick}{visual coordinate system} rules.

Combined with using \l{Property Binding}{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 qmlapp/usecases/layouts.qml import
\snippet qmlapp/usecases/layouts.qml direct

\image qmlapp/qml-uses-layouts-direct.png


\section1 Anchors

The \c Item type provides the abilitiy to anchor to other \l Item types. There are six anchor lines for each item: \e left,
\e right, \e{vertical center}, \e top, \e bottom and \e{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 \l {Positioning with Anchors} and the documentation of the \l{Item::anchors.top}{anchors property}.

\snippet qmlapp/usecases/layouts.qml import
\snippet qmlapp/usecases/layouts.qml anchors

\image qmlapp/qml-uses-layouts-anchors.png


\section1 Positioners and Layouts

For the common case of wanting to \e position a set of types in a regular pattern, Qt Quick provides some positioner
types. Items placed in a positioner are automatically positioned in some way; for example, a \l Row positions items to be
horizontally adjacent (forming a row).