Revision control
++ // Copyright (C) 2016 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
++ /*!
++ \page qtquick-usecase-layouts.html
++ \meta {keywords} {qmltopic}
++ \title Positioners and layouts
++ \keyword Use Case - Positioners and Layouts In QML
++ \brief Example of how to create layouts for visual components in a QML application.
++ \ingroup explanations-programminglanguages
++
++ 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 values 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
++ {Red square positioned using direct x and y coordinates}
++
++
++ \section1 Anchors
++
++ The \c Item type provides the abilitiy to anchor to other \l Item types. There
++ are seven anchor lines for each item: \e left, \e right, \e{vertical center},
++ \e top, \e bottom, \e baseline 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 four 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
++ {Green and orange rectangles positioned using anchors}
++
++
++ \section1 Positioners
++
++ 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 [QML] Row positions items to be
++ horizontally adjacent (forming a row).
++
++ For full details see \l {Item Positioners}.
++
++ \snippet qmlapp/usecases/layouts.qml import
++ \snippet qmlapp/usecases/layouts.qml positioners
++
++ \image qmlapp/qml-uses-layouts-positioners.png
++ {Red, green, and blue squares arranged in a row using positioners}
++
++ \section1 Layout Types
++
++ \e{Layout types} function in a similar way as positioners but allow further refinement or
++ restrictions to the layout. Specifically, the layout types allow you to:
++
++ \list
++ \li set the alignment of text and other items
++ \li resize and fill the allotted application areas automatically
++ \li set size constraints such as minimum or maximum dimensions
++ \li set the spacing between items within the layout
++ \endlist
++
++ \qml
++ GroupBox {
++ id: gridBox
++ title: "Grid layout"
++ Layout.fillWidth: true
++
++ GridLayout {
++ id: gridLayout
++ rows: 3
++ flow: GridLayout.TopToBottom
++ anchors.fill: parent
++ Label { text: "Line 1" }
++ Label { text: "Line 2" }
++ Label { text: "Line 3" }
++
++ TextField { }
++ TextField { }
++ TextField { }
++
++ TextArea {
++ text: "This widget spans over three rows in the GridLayout.\n"
++ + "All items in the GridLayout are implicitly positioned from top to bottom."
++ Layout.rowSpan: 3
++ Layout.fillHeight: true
++ Layout.fillWidth: true
++ }
++ }
++ }
++ \endqml
++ The snippet above comes from the \l{Qt Quick Layouts - Basic Example}{Basic Layouts} example. The
++ snippet shows the simplicity of adding various fields and items in a layout. The \l [QML] {GridLayout} can
++ be resized and its format is customizable through various properties.
++
++ For more information about the layout types, visit:
++ \list
++ \li \l{Qt Quick Layouts Overview}
++ \li \l{Qt Quick Layouts - Basic Example}{Basic Layouts} example
++ \endlist
++
++ \note \l{Qt Quick Layouts} was introduced in Qt 5.1 and requires \l{Qt Quick} 2.1.
++
++ */