FlexboxLayout QML Type

FlexboxLayout QML 结构为快速项目提供了弹性布局。更多内容...

此类型处于技术预览阶段，可能会有变动。

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

属性

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

关联属性

• alignSelf : enumeration

详细说明

FlexboxLayout 允许以类似于CSS 弹性盒布局的方式灵活地布局弹性项目。在内部，Qt FlexboxLayout 使用yoga 引擎来推导弹性项目的几何属性。yoga 库是CSS 弹性盒布局的一个子集。因此，FlexboxLayout 的功能范围仅限于yoga 库所支持的范围。

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

FlexboxLayout 中的项目支持以下附加属性：

• 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

点击此处进一步了解附加属性。

为了更高效地使用此类型，建议您了解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
    }
}

另请参阅 ColumnLayout 、GridLayout 、RowLayout 、StackView 以及Qt Quick Layouts 概述。

属性文档

alignContent : enumeration

此属性指定弹性行在弹性盒布局的横轴上的分布方式。

有效值：

默认值为FlexboxLayout.AlignStart 。

alignItems : enumeration

该属性指定弹性盒布局中弹性行内项目的对齐方式，其沿交叉轴（该轴与主轴正交，由direction 属性定义）进行对齐。弹性盒布局中的项目可通过附加属性FlexboxLayout.alignSelf 覆盖此属性。

可能的取值：

默认值为FlexboxLayout.AlignStart 。

columnGap : real

该属性用于指定沿内联轴向应用于FlexboxLayout 的间距。设置此属性将覆盖影响内联轴向的gap 值。

默认值为 `0`。

direction : enumeration

该属性控制弹性盒布局中项目排列的方向，并定义主轴。

可能的取值：

默认值为FlexboxLayout.Row 。

gap : real

该属性指定了需要应用于FlexboxLayout 的、沿内联轴和块轴方向的空间量。

默认值为0 。

justifyContent : enumeration

此属性指定项目在弹性盒布局主轴上的分布方式。

有效值：

默认值为FlexboxLayout.JustifyStart 。

rowGap : real

该属性用于指定沿块轴方向需应用于FlexboxLayout 的间距。设置此属性将覆盖影响块轴的gap 值。

默认值为0 。

wrap : enumeration

该属性用于指定弹性盒布局中的项目是否进行换行，当子元素超出弹性盒布局的大小时，会触发换行。如果项目进行换行，则会根据所述的溢出情况被分置在多行中。每行在横轴方向上占用的空间为该项目的最大尺寸。

可能的取值：

默认值为FlexboxLayout.NoWrap 。

相关属性文档

FlexboxLayout.alignSelf : enumeration [attached]

此附加属性允许在弹性盒布局中沿交叉轴对齐该项目，并会覆盖父级弹性盒布局属性alignItems 。

默认情况下，子项会继承父项的对齐方式，并可通过设置值FlexboxLayout.AlignStart 、FlexboxLayout.AlignCenter 和FlexboxLayout.AlignEnd 来覆盖父项的弹性盒布局属性alignItems 。

默认值为FlexboxLayout.AlignAuto 。