FlexboxLayout QML Type

The FlexboxLayout QML construct provides a flex layout for the quick items. 更多...

import 語句：	import QtQuick.Layouts
Since:	Qt 6.10
繼承：	Item
狀態：	預備

This type is under development and is subject to change.

• 所有成員列錶，包括繼承成員

特性

• alignContent : enumeration
• alignItems : enumeration
• columnGap : real
• direction : enumeration
• gap : real
• justifyContent : enumeration
• rowGap : real
• wrap : enumeration

附加特性

• alignSelf : enumeration

詳細描述

The FlexboxLayout enables to layout the quick items in a flexible way as similar to that of CSS Flexible Box Layout . Internally Qt FlexboxLayout uses the yoga engine to derive the geometry of the flex items. The yoga library is a subset of the CSS Flexible Box Layout . Thus FlexboxLayout can be limited to the feature as supported in the yoga library .

注意： 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 Layout.fillWidth or Layout.fillHeight can be set.

Items in a FlexboxLayout support these attached properties:

• FlexboxLayout.alignSelf
• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

Read more about attached properties here .

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 Qt Quick Layouts 概述 瞭解更多信息。

用法範例

The following snippet shows the minimalistic example of using QML FlexboxLayout to arrange the rectangle items in more flexible way

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
    }
}
					

注意： This API is considered tech preview and may change or be removed in future versions of Qt.

另請參閱 ColumnLayout , GridLayout , RowLayout , StackView ，和 Qt Quick Layouts 概述 .

特性文檔編製

alignContent : enumeration

This property specifies the distribution of the flex lines along the cross-axis of the flex box layout.

可能的值：

常量	描述
FlexboxLayout.AlignStart	(default) Flex lines are aligned to the start of the flex box layout.
FlexboxLayout.AlignCenter	Flex lines are aligned along the center of the flex box layout.
FlexboxLayout.AlignEnd	Flex lines are aligned to the end of the flex box layout.
FlexboxLayout.AlignStretch	Flex lines are stretched according to the height of the flex box layout.
FlexboxLayout.AlignSpaceBetween	The spaces are evenly distributed between the lines and no space along the edge of the flex box layout.
FlexboxLayout.AlignSpaceAround	The spaces are evenly distributed between the lines and half-size space on the edges of the flex box layout.
FlexboxLayout.AlignSpaceEvenly	The spaces are evenly distributed between the lines and the edges of the flex box layout. Not supported in Qt 6.10.

默認值為 FlexboxLayout.AlignStart .

alignItems : enumeration

This property specifies the alignment of the items within the flex lines of the flex box layout and its aligned along the cross-axis (which is orthogonal to the main-axis, as defined by the property direction ). This property can be overridden by the items within the flex box layout through the attached property FlexboxLayout.alignSelf .

可能的值：

常量	描述
FlexboxLayout.AlignStart	(default) Items are aligned to the start of the flex box layout cross-axis.
FlexboxLayout.AlignCenter	Items are aligned along the center of the flex box layout cross-axis.
FlexboxLayout.AlignEnd	Items are aligned to the end of the flex box layout cross-axis.

注意： The alignments mentioned in possible values are only applicable for the alignItems property

默認值為 FlexboxLayout.AlignStart .

columnGap : real

This property holds the amount of space that need to be applied to the FlexboxLayout along the inline axis . Setting this property override the gap value affecting the inline axis .

默認值為 0 .

direction : enumeration

This property holds the item layout direction within the flex box layout and it defines the main-axis .

可能的值：

常量	描述
FlexboxLayout.Row	(default) Items are laid out from left to right.
FlexboxLayout.RowReversed	Items are laid out from right to left.
FlexboxLayout.Column	Items are laid out from top to bottom.
FlexboxLayout.ColumnReversed	Items are laid out from bottom to top.

默認值為 FlexboxLayout.Row .

gap : real

This property holds the amount of space that need to be applied to the FlexboxLayout both along the inline axis and block axis .

默認值為 0 .

justifyContent : enumeration

This property specifies the distribution of the items along the main-axis of the flex box layout.

可能的值：

常量	描述
FlexboxLayout.JustifyStart	(default) Items are aligned to the start of the flex box layout.
FlexboxLayout.JustifyCenter	Items are aligned along the center of the flex box layout.
FlexboxLayout.JustifyEnd	Items are aligned to the end of the flex box layout.
FlexboxLayout.JustifySpaceBetween	The spaces are evenly distributed between the items and no space along the edges of the flex box layout.
FlexboxLayout.JustifySpaceAround	The spaces are evenly distributed between the items and half-size space on the edges of the flex box layout.
FlexboxLayout.JustiftSpaceEvenly	The spaces are evenly distributed between the items and edges of the flex box layout.

默認值為 FlexboxLayout.JustifyStart .

rowGap : real

This property holds the amount of space that need to be applied to the FlexboxLayout along the block axis . Setting this property overrides the gap value affecting the block axis .

默認值為 0 .

wrap : enumeration

This property specifies that the items within the flex box layout can wrap or not and it happens when the children overflow the size of the flex box layout. If the items are wrapped, it will be placed in multiple lines depending on overflow condition as stated. Each line takes up the maximum size of the item along the cross-axis .

可能的值：

常量	描述
FlexboxLayout.Wrap	Items are wrapped into multiple lines within the flex box layout.
FlexboxLayout.NoWrap	(default) Items are not wrapped and laid out in single line within the flex box layout.
FlexboxLayout.WrapReverse	Items are wrapped into multiple lines within the flex box layout in the reverse direction.

默認值為 FlexboxLayout.NoWrap .

附加特性文檔編製

FlexboxLayout.alignSelf : enumeration

This attached property allows to align this item in the flex box layout along the cross-axis and it overrides the parent flex box layout property alignItems .

By default, the child item inherit the alignment from the parent and it can override the parent flex box layout alignItems property with the values FlexboxLayout.AlignStart , FlexboxLayout.AlignCenter and FlexboxLayout.AlignEnd .

默認值為 FlexboxLayout.AlignAuto .

內容

1. 特性

2. 附加特性

3. 詳細描述

4. 用法範例