| CMakeLists.txt |
|
2174 |
- |
| qquickflexboxlayout.cpp |
!
\qmltype FlexboxLayout
//! \nativetype QQuickFlexboxLayout
\inherits Item
\inqmlmodule QtQuick.Layouts
\ingroup layouts
\since 6.10
\preliminary
\brief The FlexboxLayout QML construct provides a flex layout for the
quick items.
The FlexboxLayout enables to layout the quick items in a flexible way as
similar to that of
\l {https://www.w3.org/TR/css-flexbox-1/}{CSS Flexible Box Layout}.
Internally Qt FlexboxLayout uses the \l{qtquick-attribution-yoga.html}{yoga engine}
to derive the geometry of
the flex items. The \l {https://www.yogalayout.dev/}{yoga library} is a
subset of the
\l {https://www.w3.org/TR/css-flexbox-1/}{CSS Flexible Box Layout}. Thus
FlexboxLayout can be limited to the feature as supported in the
\l {https://www.yogalayout.dev/}{yoga library}.
\note The FlexboxLayout adheres to yoga library version 2.0 for its
features.
The items within the FlexboxLayout can be configured with preferred,
minimum and maximum sizes through the existing layout attached properties.
For instance, if the item within the FlexboxLayout need to be stretched,
the layout attached property \l{Layout.fillWidth} or \l{Layout.fillHeight}
can be set.
Items in a FlexboxLayout support these attached properties:
\list
\li \l{FlexboxLayout.alignSelf}
\li \l{Layout.minimumWidth}
\li \l{Layout.minimumHeight}
\li \l{Layout.preferredWidth}
\li \l{Layout.preferredHeight}
\li \l{Layout.maximumWidth}
\li \l{Layout.maximumHeight}
\li \l{Layout.fillWidth}
\li \l{Layout.fillHeight}
\li \l{Layout.margins}
\li \l{Layout.leftMargin}
\li \l{Layout.rightMargin}
\li \l{Layout.topMargin}
\li \l{Layout.bottomMargin}
\endlist
Read more about attached properties \l{QML Object Attributes}{here}.
\sa ColumnLayout
\sa GridLayout
\sa RowLayout
\sa {QtQuick.Controls::StackView}{StackView}
\sa {Qt Quick Layouts Overview}
To be able to use this type more efficiently, it is recommended that you
understand the general mechanism of the Qt Quick Layouts module. Refer to
\l{Qt Quick Layouts Overview} for more information.
\section1 Example Usage
The following snippet shows the minimalistic example of using QML
FlexboxLayout to arrange the rectangle items in more flexible way
\snippet layouts/simpleFlexboxLayout.qml layout-definition
\note This API is considered tech preview and may change or be removed in
future versions of Qt.
|
23690 |
- |
| qquickflexboxlayout_p.h |
|
9243 |
- |
| qquickflexboxlayoutengine.cpp |
|
18190 |
- |
| qquickflexboxlayoutengine_p.h |
|
1804 |
- |
| qquickflexboxlayoutitem.cpp |
|
10336 |
- |
| qquickflexboxlayoutitem_p.h |
|
3044 |
- |
| qquickgridlayoutengine.cpp |
|
901 |
- |
| qquickgridlayoutengine_p.h |
snapToPixelGrid |
4269 |
- |
| qquicklayout.cpp |
!
\qmltype Layout
//! \nativetype QQuickLayoutAttached
\inqmlmodule QtQuick.Layouts
\ingroup layouts
\brief Provides attached properties for items pushed onto a \l GridLayout,
\l RowLayout or \l ColumnLayout.
An object of type Layout is attached to children of the layout to provide layout specific
information about the item.
The properties of the attached object influence how the layout will arrange the items.
For instance, you can specify \l minimumWidth, \l preferredWidth, and
\l maximumWidth if the default values are not satisfactory.
When a layout is resized, items may grow or shrink. Due to this, items have a
\l{Layout::minimumWidth}{minimum size}, \l{Layout::preferredWidth}{preferred size} and a
\l{Layout::maximumWidth}{maximum size}.
If minimum size has not been explicitly specified on an item, the size is set to \c 0.
If maximum size has not been explicitly specified on an item, the size is set to
\c Number.POSITIVE_INFINITY.
For layouts, the implicit minimum and maximum sizes depend on the content of the layouts.
The \l fillWidth and \l fillHeight properties can either be \c true or \c false. If they are \c
false, the item's size will be fixed to its preferred size. Otherwise, it will grow or shrink
between its minimum and maximum size as the layout is resized. If there are multiple items
with \l fillWidth (or \l fillHeight) set to \c true, the layout will grow or shrink the items
relative to the ratio of their preferred size.
For more details on the layout algorithm, see also the \l {Qt Quick Layouts Overview}.
\note Do not bind to the x, y, width, or height properties of items in a layout,
as this would conflict with the goals of Layout, and can also cause binding loops.
The width and height properties are used by the layout engine to store the current
size of items as calculated from the minimum/preferred/maximum attached properties,
and can be ovewritten each time the items are laid out. Use
\l {Layout.preferredWidth} and \l {Layout.preferredHeight}, or \l {Item::}{implicitWidth}
and \l {Item::}{implicitHeight} to specify the preferred size of items.
\sa GridLayout
\sa RowLayout
\sa ColumnLayout
|
48335 |
- |
| qquicklayout_p.h |
QQuickItemChangeListener |
16868 |
- |
| qquicklayoutglobal_p.h |
|
614 |
- |
| qquicklayoutitemproxy.cpp |
!
\qmltype LayoutItemProxy
\nativetype QQuickLayoutItemProxy
\inherits Item
\inqmlmodule QtQuick.Layouts
\ingroup layouts
\since QtQuick.Layouts 6.6
\brief The LayoutItemProxy class provides a placeholder for \l{QQuickItem}s
in layouts.
Some responsive layouts require different layout hierarchies for different
screen sizes, but the layout hierarchy is the same as the QML structure and
can therefore not be changed at runtime. LayoutItemProxy overcomes this
limitation by representing a \l{target} item within the layout. The
\l{target} item itself can be defined anywhere in the QML hierarchy. This
allows declaration of multiple layouts with the same content items. The
layouts can be shown and hidden to switch between them.
The LayoutItemProxy will try to take control of the \l{target} item if it
is \l [QML] {Item::}{visible}. Taking control will position and resize the
\l{target} item to match the position and size of the LayoutItemProxy.
Further, the LayoutItemProxy will set itself as the parent of the
\l{target} (to ensure event delivery and useful drawing order) and set the
visibility to \c true. Multiple LayoutItemProxies can \l{target} the same
item, but only one LayoutItemProxy can control an item at a time. Therefore
only one of the proxies targeting the same item should be visible at a
time. If multiple proxies target the same item but \e visible is set to
false for each proxy, the item will also be invisible.
All \l{Layout} attached properties of the \l {target}, as well as the
\l{QQuickItem::implicitWidth} and \l{QQuickItem::implicitHeight} of the
\l{target} are forwarded by the LayoutItemProxy. The LayoutItemProxy will
mimic the \l{target} as closely as possible in terms of \l{Layout}
properties and size. \l{Layout} attached properties can also be set
explicitly on the LayoutItemProxy which will stop the forwarding of the
\l {target} properties.
\section1 Example Usage
This is a minimalistic example, changing between two layouts using proxies
to use the same items in both layouts. The items that populate the layouts
can be defined at an arbitrary point in the QML structure.
\snippet layouts/simpleProxy.qml item definition
Then we can define the Layouts with LayoutItemProxys
\snippet layouts/simpleProxy.qml layout definition
We can switch now between the layouts, depending on a criterion of our
choice by toggling the visibility of the layouts on and off.
\snippet layouts/simpleProxy.qml layout choice
The two resulting layouts look like this:
\div {class="float-right"}
\inlineimage simpleProxy.png
{Narrow window with stacked layout and wide window with
side-by-side layout}
\enddiv
The LayoutItemProxy can also be used without layouts, e.g. by anchoring it
to different items. A mix of real \l {Item}{Items} and proxy items is
equally possible, as well as nested structures of layouts and items.
\warning The LayoutItemProxy will set the parent of its target to itself.
Keep this in mind when referring to the parent of the target item.
\sa Item, GridLayout, RowLayout, ColumnLayout
|
20780 |
- |
| qquicklayoutitemproxy_p.h |
|
5066 |
- |
| qquicklayoutstyleinfo.cpp |
orientation |
1065 |
- |
| qquicklayoutstyleinfo_p.h |
|
917 |
- |
| qquicklinearlayout.cpp |
!
\qmltype RowLayout
//! \nativetype QQuickRowLayout
\inherits Item
\inqmlmodule QtQuick.Layouts
\ingroup layouts
\brief Identical to \l GridLayout, but having only one row.
To be able to use this type more efficiently, it is recommended that you
understand the general mechanism of the Qt Quick Layouts module. Refer to
\l{Qt Quick Layouts Overview} for more information.
It is available as a convenience for developers, as it offers a cleaner API.
Items in a RowLayout support these attached properties:
\list
\input layout.qdocinc attached-properties
\endlist
\image rowlayout.png {Two rectangles side by side showing their dimensions}
\code
RowLayout {
id: layout
anchors.fill: parent
spacing: 6
Rectangle {
color: 'teal'
Layout.fillWidth: true
Layout.minimumWidth: 50
Layout.preferredWidth: 100
Layout.maximumWidth: 300
Layout.minimumHeight: 150
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
Rectangle {
color: 'plum'
Layout.fillWidth: true
Layout.minimumWidth: 100
Layout.preferredWidth: 200
Layout.preferredHeight: 100
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
}
\endcode
Read more about attached properties \l{QML Object Attributes}{here}.
\sa ColumnLayout
\sa GridLayout
\sa StackLayout
\sa Row
\sa {Qt Quick Layouts Overview}
|
31566 |
- |
| qquicklinearlayout_p.h |
QQuickGridLayoutBase
*
|
7356 |
- |
| qquickstacklayout.cpp |
!
\qmltype StackLayout
//! \nativetype QQuickStackLayout
\inherits Item
\inqmlmodule QtQuick.Layouts
\ingroup layouts
\brief The StackLayout class provides a stack of items where
only one item is visible at a time.
To be able to use this type more efficiently, it is recommended that you
understand the general mechanism of the Qt Quick Layouts module. Refer to
\l{Qt Quick Layouts Overview} for more information.
The current visible item can be modified by setting the \l currentIndex property.
The index corresponds to the order of the StackLayout's children.
In contrast to most other layouts, child Items' \l{Layout::fillWidth}{Layout.fillWidth} and \l{Layout::fillHeight}{Layout.fillHeight} properties
default to \c true. As a consequence, child items are by default filled to match the size of the StackLayout as long as their
\l{Layout::maximumWidth}{Layout.maximumWidth} or \l{Layout::maximumHeight}{Layout.maximumHeight} does not prevent it.
Items are added to the layout by reparenting the item to the layout. Similarly, removal is done by reparenting the item from the layout.
Both of these operations will affect the layout's \l count property.
The following code will create a StackLayout where only the 'plum' rectangle is visible.
\code
StackLayout {
id: layout
anchors.fill: parent
currentIndex: 1
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
}
\endcode
Items in a StackLayout support these attached properties:
\list
\li \l{Layout.minimumWidth}
\li \l{Layout.minimumHeight}
\li \l{Layout.preferredWidth}
\li \l{Layout.preferredHeight}
\li \l{Layout.maximumWidth}
\li \l{Layout.maximumHeight}
\li \l{Layout.fillWidth}
\li \l{Layout.fillHeight}
\endlist
Read more about attached properties \l{QML Object Attributes}{here}.
\sa ColumnLayout
\sa GridLayout
\sa RowLayout
\sa {QtQuick.Controls::StackView}{StackView}
\sa {Qt Quick Layouts Overview}
|
15804 |
- |
| qquickstacklayout_p.h |
QQuickItemChangeListener |
4144 |
- |