diff options
| author | Paul Wicking <paul.wicking@qt.io> | 2022-12-13 16:38:11 +0100 |
|---|---|---|
| committer | Paul Wicking <paul.wicking@qt.io> | 2022-12-21 16:49:25 +0100 |
| commit | 21455028f34bdb09981c7f4a0537356857f3ca75 (patch) | |
| tree | 457f25ec2b05669cfa221858fc3878cad16db27f /src/quick/doc/snippets/qml | |
| parent | 9bad0175903bb10ad6eda82408be83060d696429 (diff) | |
Revamp Qt Quick Layouts overview documentation
* Use sentence capitalization in section titles
* Move sections around for improved reading experience.
* Reflow text to conform to 80 column documentation width convention.
* Add a section that describes spacing in more detail.
* Add new snippet that shows the impact of default spacing on layouts.
* Add new snippet that shows spans in a GridLayout.
* Add information about Spans, and how unneeded spans and empty
columns are ignored.
* Update screenshot with improved color choice, add screenshot as
visual aid to new text.
* Describe how the size hints of items can be (ab)used in order to
specify size weights/ratios on each item.
* Describe how each item is aligned inside a cell.
* Emphasize that size hints should never depend on "external" factors.
Pick-to: 6.5
Fixes: QTBUG-109437
Fixes: QTBUG-98991
Fixes: QTBUG-91040
Task-number: QTBUG-103976
Change-Id: Ia69b4e679eece56a5e6bf1a49038118a320b76f6
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qml')
| -rw-r--r-- | src/quick/doc/snippets/qml/gridlayout_with_span.qml | 43 | ||||
| -rw-r--r-- | src/quick/doc/snippets/qml/layout_with_default_spacing.qml | 56 | ||||
| -rw-r--r-- | src/quick/doc/snippets/qml/windowconstraints.qml | 2 |
3 files changed, 100 insertions, 1 deletions
diff --git a/src/quick/doc/snippets/qml/gridlayout_with_span.qml b/src/quick/doc/snippets/qml/gridlayout_with_span.qml new file mode 100644 index 0000000000..b9d0f1b1c3 --- /dev/null +++ b/src/quick/doc/snippets/qml/gridlayout_with_span.qml @@ -0,0 +1,43 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +//! [gridlayout-with-span] +ApplicationWindow { + id: root + width: 300 + height: 300 + visible: true + + GridLayout { + rows: 2 + columns: 3 + Rectangle { + color: 'cyan' + implicitWidth: 50 + implicitHeight: 50 + } + Rectangle { + color: 'magenta' + implicitWidth: 50 + implicitHeight: 50 + } + Rectangle { + color: 'yellow' + implicitWidth: 50 + implicitHeight: 50 + } + Rectangle { + color: 'black' + implicitWidth: 50 + implicitHeight: 50 + Layout.columnSpan: 3 + Layout.alignment: Qt.AlignHCenter + } + } +} +//! [gridlayout-with-span] + diff --git a/src/quick/doc/snippets/qml/layout_with_default_spacing.qml b/src/quick/doc/snippets/qml/layout_with_default_spacing.qml new file mode 100644 index 0000000000..f39f78a9a2 --- /dev/null +++ b/src/quick/doc/snippets/qml/layout_with_default_spacing.qml @@ -0,0 +1,56 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +//! [layout-with-default-spacing] +ApplicationWindow { + id: root + width: 300 + height: 300 + visible: true + + RowLayout { + anchors.fill: parent + ColumnLayout { + Rectangle { + color: "tomato"; + Layout.fillWidth: true + Layout.fillHeight: true + } + RowLayout { + Rectangle { + color: "navajowhite" + Layout.fillWidth: true + Layout.fillHeight: true + } + Rectangle { + color: "darkseagreen" + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + ColumnLayout { + Rectangle { + color: "lightpink" + Layout.fillWidth: true + Layout.fillHeight: true + } + Rectangle { + color: "slategray" + Layout.fillWidth: true + Layout.fillHeight: true + } + Rectangle { + color: "lightskyblue" + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } +} +//! [layout-with-default-spacing] + diff --git a/src/quick/doc/snippets/qml/windowconstraints.qml b/src/quick/doc/snippets/qml/windowconstraints.qml index 9c4868f00f..87424ffe79 100644 --- a/src/quick/doc/snippets/qml/windowconstraints.qml +++ b/src/quick/doc/snippets/qml/windowconstraints.qml @@ -25,7 +25,7 @@ Window { //! [anchoring] spacing: 6 Rectangle { - color: 'azure' + color: 'orange' Layout.fillWidth: true Layout.minimumWidth: 50 Layout.preferredWidth: 100 |