QML类型：Grid（网格定位器）

一、描述

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

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

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

import QtQuick 2.0

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 中的某个项目不可见，或者它的宽度或高度为 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（行定位器）。