Grid QML Type

将子元素以网格形式排列。更多...

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

属性

• add : Transition
• bottomPadding : real
• columnSpacing : real
• columns : int
• effectiveHorizontalItemAlignment : enumeration
• effectiveLayoutDirection : enumeration
• flow : enumeration
• horizontalItemAlignment : enumeration
• layoutDirection : enumeration
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• rowSpacing : real
• rows : int
• spacing : real
• topPadding : real
• verticalItemAlignment : enumeration

信号

• positioningComplete()

方法

• void forceLayout()

详细说明

Grid 是一种将子项以网格形式排列的布局类型。

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

Grid 默认包含四列，并根据需要创建足够多的行以容纳所有子项。可以通过设置 `rows ` 和 `columns ` 属性来限制行数和列数。

例如，下图是一个包含五个不同大小矩形的网格：

import QtQuick

Grid {
    columns: 3
    spacing: 2
    Rectangle { 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 会自动将子项以网格形式排列：

如果网格中的某个项目未设置visible ，或者其宽度或高度为0，则该项目不会被布局，也不会显示在该列中。此外，由于网格会自动定位其子项，因此网格中的子项不应设置x 或y 位置，也不应使用任何anchor 属性进行锚定。

有关使用 Grid 及其他相关定位器的更多信息，请参阅“项定位器”。

另请参阅 Flow 、Row 、Column 、Positioner 、GridLayout 以及Qt Quick 示例 - 定位器。

属性文档

add : Transition

该属性用于存储添加到此定位器中的项目应执行的过渡效果。对于定位器而言，这适用于：

• 在定位器创建后，作为其子项被创建或重新关联的项
• 将Item::visible 属性从false更改为true，从而变为可见状态的子项

该过渡效果可使用 `ViewTransition ` 属性来获取有关正在添加的项的更多详细信息。有关使用这些过渡效果的更多详细信息和示例，请参阅ViewTransition 文档。

另请参阅 populate 、ViewTransition 以及Qt Quick 示例 - 定位器。

这些属性用于控制内容周围的填充。

columnSpacing : real

该属性指定列之间的间距（以像素为单位）。

如果未设置此属性，则使用间距值作为列间距。

默认情况下，此属性未设置。

另请参阅 rowSpacing 。

columns : int

该属性用于指定网格中的列数。默认列数为 4。

如果网格中的项目不足以填满指定数量的列，则部分列的宽度将为零。

设置网格中项目的水平和垂直对齐方式。默认情况下，项目垂直对齐于顶部。水平对齐遵循网格的layoutDirection 属性，例如，当layoutDirection 的值设为LeftToRight时，项目将左对齐。

horizontalItemAlignment 的有效值包括：Grid.AlignLeft 、Grid.AlignRight 和Grid.AlignHCenter 。

verticalItemAlignment 的有效值为：Grid.AlignTop 、Grid.AlignBottom 和Grid.AlignVCenter 。

下图展示了三个关于如何对齐项目的示例。

水平对齐	AlignLeft	居中对齐	居中对齐
垂直对齐	顶对齐	顶对齐	AlignVCenter

当使用附加属性LayoutMirroring::enabled 或通过设置layoutDirection 来镜像布局时，项目的水平对齐方式也会随之镜像。但是，属性horizontalItemAlignment 将保持不变。要查询项目实际的水平对齐方式，请使用只读属性effectiveHorizontalItemAlignment 。

另请参阅 Grid::layoutDirection 和LayoutMirroring 。

effectiveLayoutDirection : enumeration [read-only]

该属性存储网格的有效布局方向。

当使用附加属性 `LayoutMirroring::enabled ` 进行区域布局时，网格定位器的视觉布局方向将被镜像。但是，属性 `layoutDirection ` 将保持不变。

另请参阅 Grid::layoutDirection 和LayoutMirroring 。

flow : enumeration

该属性控制布局的流向。

可能的取值包括：

• Grid.LeftToRight（默认）——项目在layoutDirection 中并排排列，然后换行到下一行。
• Grid.TopToBottom — 项目从上到下并排排列，然后换行至下一列。

layoutDirection : enumeration

该属性用于指定布局的方向。

可能的取值包括：

• Qt.LeftToRight（默认）——项目从上到下、从左到右排列。流向取决于Grid::flow 属性。
• Qt.RightToLeft - 项目从上到下、从右到左排列。流向取决于Grid::flow 属性。

另请参阅 Flow::layoutDirection 和Row::layoutDirection 。

move : Transition

此属性用于控制在定位器内部移动的项的过渡效果。对于定位器而言，这适用于：

• 因定位器中其他元素的添加、移除或重新排列而发生位移的子元素
• 因定位器中其他元素调整大小而重新定位的子元素

该过渡效果可使用 `ViewTransition ` 属性来获取有关正在移动的项的更多详细信息。但请注意，对于此移动过渡效果，`ViewTransition.targetIndexes` 和 `ViewTransition.targetItems` 列表仅在该过渡效果由定位器中其他项的添加触发时才会被设置；在其他情况下，这些列表将为空。 有关使用这些过渡的更多详细信息和示例，请参阅ViewTransition 文档。

另请参阅 add 、populate 、ViewTransition 以及Qt Quick 中的示例——定位器。

populate : Transition

该属性存储在定位器创建时，属于该定位器的项目所执行的过渡效果。该过渡效果在定位器首次创建时执行。

该过渡可使用ViewTransition 属性来获取有关正在添加的项的更多详细信息。有关使用这些过渡的更多详细信息和示例，请参阅ViewTransition 文档。

另请参阅 add 、ViewTransition 以及Qt Quick 示例 - 定位器。

rowSpacing : real

该属性用于指定行与行之间的间距（以像素为单位）。

如果未设置此属性，则使用“间距”属性来确定行间距。

默认情况下，此属性未设置。

另请参阅 columnSpacing 。

rows : int

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

如果网格中的项目不足以填满指定的行数，则部分行的宽度将为零。

spacing : real

间距是指相邻项目之间留出的空白区域，单位为像素。水平和垂直方向应用的间距大小相同。默认间距为 0。

下面的示例在灰色背景上放置了一个包含红色、蓝色和绿色矩形的网格。网格定位器所占的区域显示为白色。左侧的定位器未设置间距（默认设置），右侧的定位器设置了 6 的间距。

另请参阅 rows 和columns 。

Signal 文档

positioningComplete()

当定位完成时，会发出此信号。

方法文档

void forceLayout()

Grid 通常每帧对子元素进行一次定位。这意味着在脚本块内部，底层的子元素可能已经发生变化，但 Grid 尚未相应地更新。

此方法可强制 Grid 立即响应其子元素中任何未处理的变更。

注意：通常情况下，方法应在组件处理完成后才调用。