【环球新要闻】QML类型：LayoutMirroring、Column、Flow、Grid

来源：QT教程 2023-07-06 03:05:39

LayoutMirroring（布局镜像）

(相关资料图)

LayoutMirroring 附加属性用于水平镜像 Item 锚点、定位器类型、视图。

镜像是一种视觉上的变化：左锚点变成右锚点，定位器类型反转子项的水平布局。

LayoutMirroring 可以附加到 Window 窗口。

Rectangle{// LayoutMirroring.enabled: true// LayoutMirroring.childrenInherit: trueanchors.fill: parentcolor: \"yellow\"border.width: 1Row{anchors { left: parent.left; margins: 5 }y: 5; spacing: 5Repeater{model: 5Rectangle{color: \"red\"opacity: (5 - index) / 5width: 40; height: 40Text{text: index + 1anchors.centerIn: parent}}}}}

LayoutMirroring.enabled: trueLayoutMirroring.childrenInherit: true

属性成员
1、childrenInherit : bool
此项的 LayoutMirroring.enabled 值是否由其子项继承。默认值为 false。
2、enabled : bool
此属性保存项目的布局是否水平镜像。将此设置为 true 水平反转锚点设置，使左锚点变为右，右锚点变为左。默认值为 false。
【领 QT开发教程学习资料，点击下方链接莬费领取↓↓ ，先码住不迷路~】
点击这里：

Column（列定位器）

Column 是一种将其子项沿单个列定位的类型。它是不使用锚点的情况下垂直定位一系列项目的便捷方式。

下面是一个包含三个不同大小的矩形的列：

Column{spacing: 2Rectangle { color: \"red\"; width: 50; height: 50 }Rectangle { color: \"green\"; width: 20; height: 50 }Rectangle { color: \"blue\"; width: 50; height: 20 }}

如果列中的项目不可见，或者它的宽度或高度为 0，则项目将不会被布置并且在列中也不可见。

由于 Column 会自动垂直定位其子项，因此 Column 内的子项不应使用 top、bottom、anchors.verticalCenter、fill、centerIn 这些锚点设置，也不应该设置 y 属性。如果需要执行这些操作，请考虑在不使用 Column 的情况下定位项目。

当项目被添加到列中或在列内移动时，列可以使用特定转换为项目设置动画。

Column{spacing: 2Rectangle { 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: trueKeys.onSpacePressed: greenRect.visible = !greenRect.visible}

属性成员

1、add : Transition

此属性保存要为添加到此定位器的项目运行的转换。这适用于：

创建定位器后作为定位器子项创建或重新设置父项的项目。

将 Item::visible 属性从 false 更改为 true 的子项。

2、move : Transition

此属性保存为在定位器内移动的项目运行的过渡。这适用于：

由于定位器中项目的添加、移除或重新排列而移位时会移动的子项目。

由于定位器中项目的大小调整而重新定位的子项目。

3、populate : Transition

此属性保存创建定位器时运行的转换。

Column{spacing: 2Rectangle { color: \"red\"; width: 50; height: 50 }Rectangle { id: greenRect; color: \"green\"; width: 20; height: 50 }Rectangle { color: \"blue\"; width: 50; height: 20 }populate : Transition{NumberAnimation { properties: \"x,y\"; duration: 1000 }}}

4、spacing : real
间距是相邻项目之间留空的像素量。默认间距为 0。
5、四周填充属性：
bottomPadding : real leftPadding : real padding : real rightPadding : real topPadding : real
信号成员
1、positioningComplete()
当定位完成时发出该信号。
成员函数
1、forceLayout()
此方法强制 Column 立即响应其子项中的任何显着更改。
注意：方法一般只应在组件完成后调用。
【领 QT开发教程学习资料，点击下方链接莬费领取↓↓ ，先码住不迷路~】
点击这里：

Flow（流式定位器）

Flow 会自动并排放置子项，并根据需要进行换行。

Flow{anchors.fill: parentanchors.margins: 4spacing: 10Text { text: \"Text\"; font.pixelSize: 40 }Text { text: \"items\"; font.pixelSize: 40 }Text { text: \"flowing\"; font.pixelSize: 40 }Text { text: \"inside\"; font.pixelSize: 40 }Text { text: \"a\"; font.pixelSize: 40 }Text { text: \"Flow\"; font.pixelSize: 40 }Text { text: \"item\"; font.pixelSize: 40 }}

如果 Flow 中的某个项目不可见，或者它的宽度或高度为 0，则该项目将不会被布置并且在 Flow 中也不可见。

由于 Flow 会自动定位其子项，因此 Flow 中的子项不应设置其 x 或 y 位置或使用任何锚属性锚定自身。

属性成员

1、flow : enumeration

此属性保存布局的流程。

Flow.LeftToRight：默认，根据 layoutDirection 将项目彼此相邻放置，直到超过 Flow 的宽度，然后包装到下一行。

Flow.TopToBottom：项目从上到下彼此相邻放置，直到超过 Flow 的高度，然后包装到下一列。

其他属性、信号、函数见：Row（行定位器）、Column（列定位器）、Grid（网格定位器）。

Grid（网格定位器）

Grid 创建一个单元格网格，该网格足够容纳其所有子项，并将这些项从左到右、从上到下放置在单元格中。每个项目都位于其单元格的左上角，位置为 (0, 0)。

网格默认为四列，并根据需要创建尽可能多的行以适合其所有子项。

例如，下面是一个包含五个不同大小的矩形的 Grid：

import QtQuick 2.0Grid{columns: 3spacing: 2Rectangle { color: \"red\"; width: 50; height: 50 }Rectangle { color: \"green\"; width: 20; height: 50 }Rectangle { color: \"blue\"; width: 50; height: 20 }Rectangle { color: \"cyan\"; width: 50; height: 50 }Rectangle { color: \"magenta\"; width: 10; height: 10 }}

如果 Grid 中的某个项目不可见，或者它的宽度或高度为 0，则该项目将不会被布置并且不会在列中可见。

由于 Grid 会自动定位其子项，因此 Grid 内的子项不应设置其 x 或 y 位置或使用任何锚属性来锚定自身。

属性成员

1、effectiveHorizontalItemAlignment : enumeration

horizontalItemAlignment : enumeration

verticalItemAlignment : enumeration

设置网格中项目的水平和垂直对齐方式。

默认情况下：

项目垂直对齐到顶部。

水平对齐遵循 Grid 的 layoutDirection，例如当 layoutDirection 从 LeftToRight 时，项目将在左侧对齐。

horizontalItemAlignment 的有效值为：Grid.AlignLeft、Grid.AlignRight、Grid.AlignHCenter。 VerticalItemAlignment 的有效值为：Grid.AlignTop、Grid.AlignBottom、Grid.AlignVCenter。

下图显示了如何对齐项目的三个示例。

2、columnSpacing : qreal

rowSpacing : qreal

此属性保存列、行之间的间距（以像素为单位）。默认情况下未设置此属性。

如果未设置此属性，则 spacing 用于列、行间距。

3、columns : int

此属性保存网格中的列数。默认列数为 4。

如果网格没有足够的项目来填充指定的列数，则某些列的宽度将为零。

4、flow : enumeration

此属性保存布局的流程。

Grid.LeftToRight：默认，项目在 layoutDirection 中彼此相邻放置，然后换行到下一行。 Grid.TopToBottom：项目从上到下彼此相邻放置，然后换行到下一列。

5、rows : int