列 QML 类型

将其子项在列中对齐。 更多...

• 所有成员列表，包括继承成员

属性

• add : Transition
• bottomPadding : real
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• spacing : real
• topPadding : real

信号

• positioningComplete()

方法

• forceLayout()

详细说明

Column 是一种类型，其将子项沿单列对齐。它可以用作在不使用 锚点 的情况下，垂直对齐一系列项的便捷方式。

以下是一个包含三个不同大小的矩形的 Column

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

Column 会将这些项目自动垂直排列，如下所示

如果 Column 中的项不可见，或其宽度或高度为 0，则该项不会进行布局，并且在 Column 中也不可见。此外，由于 Column 会自动垂直排列其子项，因此 Column 中的子项不应设置其 y 位置或使用 top、bottom、anchors.verticalCenter、fill 或 centerIn 锚点垂直对齐自己。如果您需要执行这些操作，请考虑在无需使用 Column 的情况下定位项。

请注意，Column 中的项可以使用附加属性 Positioner 来访问有关其在 Column 中位置的更多信息。

有关使用 Column 和其他相关位置器类型的更多信息，请参阅 项位置器。

使用过渡动画

当向 Column 中添加项或移动 Column 中的项时，Column 会使用特定的过渡动画来动画化项。

例如，下面的Column设置move属性为特定的过渡

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}

当按下空格键时，绿色Rectangle的visible值将被切换。随着它的出现和消失，蓝色Rectangle在Column中移动，并且move过渡被自动应用于蓝色Rectangle

另请参阅Row、Grid、Flow、Positioner、ColumnLayout和Qt Quick 示例 - Positioner。

属性文档

信号文档

方法文档