FlexboxLayout QML Type

FlexboxLayout QML 结构为快速项目提供了一种柔性布局。更多

Import Statement:	`import QtQuick.Layouts`
Since:	Qt 6.10
Inherits:	Item
Status:	Preliminary

此类型正在开发中，可能会有更改。

所有成员（包括继承成员）列表

属性

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

附属物业

alignSelf : enumeration

详细说明

FlexboxLayout 能以类似CSS Flexible Box Layout 的灵活方式布局快速项目。Qt FlexboxLayout 内部使用yoga 引擎来推导弹性项的几何形状。瑜伽库是 CSS Flexible Box Layout 的子集。因此，FlexboxLayout 可以仅限于瑜伽库所支持的功能。

注： FlexboxLayout 的功能遵循瑜伽库 2.0 版本。

FlexboxLayout 中的项目可通过现有布局附加属性配置首选、最小和最大尺寸。例如，如果需要拉伸 FlexboxLayout 中的项目，可以设置布局附加属性Layout.fillWidth 或Layout.fillHeight 。

FlexboxLayout 中的项目支持这些附加属性：

点击此处了解有关附加属性的更多信息。

为了更有效地使用该类型，建议您了解Qt Quick Layouts 模块的一般机制。更多信息请参阅Qt Quick Layouts 概述。

使用示例

下面的代码段展示了使用 QML FlexboxLayout 以更灵活的方式排列矩形项的简约示例

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

注意： 该 API 被视为技术预览版，可能会在未来的 Qt 版本中更改或删除。

另请参阅 ColumnLayout,GridLayout,RowLayout,StackView 和Qt Quick Layouts 概览。

属性文档

alignContent : enumeration

此属性指定柔性线沿柔性框布局横轴的分布。

可能的值：

常量	说明
`FlexboxLayout.AlignStart`	(默认）柔性线与柔性框布局的起点对齐。
`FlexboxLayout.AlignCenter`	柔性线沿柔性框布局的中心对齐。
`FlexboxLayout.AlignEnd`	柔性线条与柔性方框布局的末端对齐。
`FlexboxLayout.AlignStretch`	柔性线条根据柔性方框布局的高度拉伸。
`FlexboxLayout.AlignSpaceBetween`	线条之间的空格均匀分布，柔性方框布局边缘无空格。
`FlexboxLayout.AlignSpaceAround`	空格均匀分布在线条之间，柔性方框版面边缘留有一半大小的空格。
`FlexboxLayout.AlignSpaceEvenly`	空格均匀分布在线条和柔性方框布局的边缘之间。Qt 6.10 中不支持。

默认值为FlexboxLayout.AlignStart 。

alignItems : enumeration

该属性指定了项目在柔性方框布局的柔性线内的对齐方式，并沿横轴（与主轴正交，由属性direction 定义）对齐。该属性可由柔性方框布局中的项目通过附加属性FlexboxLayout.alignSelf 改写。

可能的值

常量	说明
`FlexboxLayout.AlignStart`	(默认）项目与柔性方框布局横轴的起点对齐。
`FlexboxLayout.AlignCenter`	项目沿柔性方框布局十字轴的中心对齐。
`FlexboxLayout.AlignEnd`	项目按柔性方框布局十字轴的末端对齐。

注：可能值中提到的对齐方式仅适用于 alignItems 属性。

默认值为FlexboxLayout.AlignStart 。

columnGap : real

该属性保留了FlexboxLayout 沿内联轴需要应用的空间大小。设置该属性将覆盖影响内联轴的gap 值。

默认值为0 。

direction : enumeration

该属性用于保存柔性方框布局中的项目布局方向，并定义主轴。

可能的值：

常量	说明
`FlexboxLayout.Row`	(默认）项目从左到右布局。
`FlexboxLayout.RowReversed`	项目从右向左布局。
`FlexboxLayout.Column`	项目从上到下排列。
`FlexboxLayout.ColumnReversed`	项目从下至上排列。

默认值为FlexboxLayout.Row 。

gap : real

该属性表示FlexboxLayout 沿内联轴和块轴需要应用的空间大小。

默认值为0 。

justifyContent : enumeration

该属性指定项目沿柔性方框布局主轴的分布。

可能的值

常量	说明
`FlexboxLayout.JustifyStart`	(默认）项目按柔性方框布局的起点对齐。
`FlexboxLayout.JustifyCenter`	项目沿柔性方框布局的中心对齐。
`FlexboxLayout.JustifyEnd`	项目与柔性方框布局的末端对齐。
`FlexboxLayout.JustifySpaceBetween`	项目之间的空格均匀分布，柔性方框布局边缘无空格。
`FlexboxLayout.JustifySpaceAround`	项目之间的空格均匀分布，柔性方框版面的边缘留有一半大小的空格。
`FlexboxLayout.JustiftSpaceEvenly`	空格均匀分布在项目之间，并在柔性方框布局的边缘留出一半空间。

默认值为FlexboxLayout.JustifyStart 。

rowGap : real

该属性保留了FlexboxLayout 沿块轴线需要应用的空间大小。设置此属性可覆盖影响块轴的gap 值。

默认值为0 。

wrap : enumeration

该属性用于指定柔性方框布局中的项目是否可以包装，当子项目超出柔性方框布局的大小时，就会发生包装。如果项目被包裹，则会根据所述的溢出条件分成多行。每一行都会占用项目沿横轴的最大尺寸。

可能的值

常数	说明
`FlexboxLayout.Wrap`	在柔性方框布局中，项目被包裹成多行。
`FlexboxLayout.NoWrap`	(默认）在柔性方框布局中不对项目进行封装并以单行排列。
`FlexboxLayout.WrapReverse`	项目在柔性方框布局中被反向封装成多行。

默认值为FlexboxLayout.NoWrap 。

附加属性文档

FlexboxLayout.alignSelf : enumeration

此附加属性允许在柔性方框布局中沿横轴对齐此项目，它覆盖父柔性方框布局属性alignItems 。

默认情况下，子项继承父项的对齐方式，并可覆盖父项柔性方框布局alignItems 属性，其值为FlexboxLayout.AlignStart,FlexboxLayout.AlignCenter 和FlexboxLayout.AlignEnd 。

默认值为FlexboxLayout.AlignAuto 。

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.