【环球新要闻】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

此属性保存网格中的行数。

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

6、spacing : qreal

间距是相邻项目之间留空的像素量。默认间距为 0。

其他属性、信号、成员函数见:Column(列定位器)、Row(行定位器)。

【领 QT开发教程 学习资料, 点击下方链接莬费领取↓↓ ,先码住不迷路~】

点击这里:

上一篇 : 雨夜凌晨,两个黑影将一重物搬上三轮车……|世界速看料

下一篇 : 绣出文创新天地

相关推荐

推荐阅读