diff options
| author | Santhosh Kumar <santhosh.kumar.selvaraj@qt.io> | 2025-03-24 12:44:47 +0100 |
|---|---|---|
| committer | Jan Arve Sæther <jan-arve.saether@qt.io> | 2025-05-28 03:29:34 +0200 |
| commit | 6617c64b8f00ce99abcf255520456f2bc5867737 (patch) | |
| tree | 9dcf99bcf5c908a04ed926f6baea9c8414504c88 /src/quick/doc/snippets | |
| parent | b1fc47a467562340278b90acb36c3ea12c12bfa9 (diff) | |
Support Flexbox layout in Qt Quick
The Flexbox component allows the arrangement of the items within the
layout in a more flexible way. There is a CSS standard defined for the
flexbox layout https://www.w3.org/TR/CSS3-flexbox/. This can be achieved
in qt-quick using the yoga library
(https://github.com/facebook/yoga.git).
[ChangeLog][Third-Party Code] Added MIT LICENSE from the third-party
Facebook yoga source (https://github.com/facebook/yoga/blob/main/LICENSE)
to enable its usage in Qt QuickLayouts.
Task-number: QTBUG-133633
Change-Id: I2187dba031cb4842baef1c5a84c7132eb8c63137
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>
Diffstat (limited to 'src/quick/doc/snippets')
| -rw-r--r-- | src/quick/doc/snippets/layouts/simpleFlexboxLayout.qml | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/layouts/simpleFlexboxLayout.qml b/src/quick/doc/snippets/layouts/simpleFlexboxLayout.qml new file mode 100644 index 0000000000..eea4b415f5 --- /dev/null +++ b/src/quick/doc/snippets/layouts/simpleFlexboxLayout.qml @@ -0,0 +1,47 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +ApplicationWindow { + width: 640 + height: 480 + visible: true + title: qsTr("QML Flexbox Layout") + //! [layout-definition] + FlexboxLayout { + id: flexLayout + anchors.fill: parent + wrap: FlexboxLayout.Wrap + direction: FlexboxLayout.Row + justifyContent: FlexboxLayout.JustifySpaceAround + Rectangle { + color: 'teal' + implicitWidth: 200 + implicitHeight: 200 + } + Rectangle { + color: 'plum' + implicitWidth: 200 + implicitHeight: 200 + } + Rectangle { + color: 'olive' + implicitWidth: 200 + implicitHeight: 200 + } + Rectangle { + color: 'beige' + implicitWidth: 200 + implicitHeight: 200 + } + Rectangle { + color: 'darkseagreen' + implicitWidth: 200 + implicitHeight: 200 + } + } + //! [layout-definition] +} |