QML类型说明-Grid

Grid

ImportStatement:   import QtQuick 2.2

Inherits:      Item

 

Properties

add :Transition

columnSpacing: qreal

columns :int

effectiveHorizontalItemAlignment: enumeration

effectiveLayoutDirection: enumeration

flow : enumeration

horizontalItemAlignment: enumeration

layoutDirection: enumeration

move :Transition

populate :Transition

rowSpacing :qreal

rows : int

spacing :qreal

verticalItemAlignment: enumeration

 

DetailedDescription

Grid是以栅格的方式定位子组件的组件。

Grid创建足够巨大的栅格，足够定位所有的子组件。它从左到右，从顶到底放置子组件。每个子组件定位在单元的左上角(0,0)。

Grid默认4列，根据所有子组件的数目创建需要的行。行和列的数目也能通过设置rows和columns属性来指定。

例如下面的例子包含5个不同尺寸的矩形。

importQtQuick 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以栅格格式自动定位子组件：

如果Grid中的组件不可见或子组件的宽或高为0，那么子组件不会被布局，也不会被显示。同时，由于Grid自动定位子组件的位置，所以不推荐设置子组件的x、y或用锚属性锚定子组件。

 

PropertyDocumentation

add :Transition

往Grid中增加组件或先创建位置，后给位置相应的子组件或一个组件由不可见变得可见时，这个过渡触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。可参阅ViewTransition的文档来了解更多信息。

注意在Grid创建时已经是Grid的一部分的子组件不会触发这个过渡，取代的，是触发populate过渡。

 

columnSpacing: qreal

列之间的空间。如果这个属性没有设置，spacing被用作列间距。默认没有设置。

 

columns :int

栅格中列的数目，默认为4。如果Grid没有足够的子组件，不分列将变成0宽度。

 

effectiveHorizontalItemAlignment: enumeration

这是只读的。设置栅格中子组件的水平对齐和垂直对齐。默认子组件垂直对齐到顶，水平对齐跟随栅格的layoutDirection。例如，layoutDirection为从左到右，组件将对齐到左边。

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

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

下边是如何对齐的例子：

Horizontal alignment	AlignLeft	AlignHCenter	AlignHCenter
Vertical alignment	AlignTop	AlignTop	AlignVCenter

当使用附加属性LayoutMirroring::enabled或通过设置layoutDirection进行镜像布局时，组件的可视水平对齐也被镜像。尽管如此，horizontalItemAlignment的属性不会改变。所以查询组件的有效水平对齐，使用effectiveHorizontalItemAlignment。

 

effectiveLayoutDirection: enumeration

这是只读的。栅格的有效布局方向。当使用为布局使用附加属性LayoutMirroring::enabled时，栅格定位的可视布局被镜像但layoutDirection不变。

 

flow :enumeration

布局的流动方向。可能的值为

Grid.LeftToRight(default) -根据layoutDirection 定位下一个子组件。当宽度超过限制，开始在下一行开始定位组件。

Grid.TopToBottom-从顶到底定位下一个子组件，高度超过限制，开始在下一列定位组件。

 

horizontalItemAlignment: enumeration

设置栅格中子组件的水平对齐和垂直对齐。默认子组件垂直对齐到顶，水平对齐跟随栅格的layoutDirection。例如，layoutDirection为从左到右，组件将对齐到左边。

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

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

下边是如何对齐的例子：

Horizontal alignment	AlignLeft	AlignHCenter	AlignHCenter
Vertical alignment	AlignTop	AlignTop	AlignVCenter

当使用附加属性LayoutMirroring::enabled或通过设置layoutDirection进行镜像布局时，组件的可视水平对齐也被镜像。尽管如此，horizontalItemAlignment的属性不会改变。所以查询组件的有效水平对齐，使用effectiveHorizontalItemAlignment。

 

layoutDirection: enumeration

布局方向。属性值为：

Qt.LeftToRight(default) -子组件按照从顶到底，从左到右的顺序一个接一个定位。流方向依赖于Grid::flow属性。

Qt.RightToLeft-子组件按照从顶到底，从右到左的顺序一个接一个定位，流方向依赖于 Grid::flow属性。

 

move :Transition

当由于添加，移除或重新排列子组件导致组件失去当前所处的位置，或改变组件的大小导致子组件失去位置时，这个过渡被触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。注意对这个过渡来说，只有当过渡被在移动组件的位置添加组件而失去位置所触发时，ViewTransition.targetIndexes和ViewTransition.targetItems列表才被设置。其他情况，列表是空的。可参阅ViewTransition的文档来了解更多信息。

注意：在Qt Quick 1，Grid被创建时的所有存在子组件，都使用这个过渡。而在Qt Quick 2中，使用populate这个过渡来处理Grid的第一次创建。

 

populate :Transition

Grid第一次被创建时，已经是Flow的一部分的子组件触发的过渡。过渡能用ViewTransition属性去访问添加在子组件上的细节。可参阅ViewTransition的文档来了解更多信息

 

rowSpacing :qreal

在行之间的空间，以像素为单位。如果没有设置，spacing被作为行间隔。默认没有设置。

 

rows : int

栅格的行数。如果子组件的数目不够填充指定的所有行，一些行的宽度变为0。（个人认为是高度，但英文文档是宽度。从可视的角度，宽为0和高为0效果一样）

 

spacing :qreal

相邻组件之间的空间。这个值用于水平方向和垂直方向间隔一致。默认为0。

下面的例子，在栅格中放置了红、蓝、黄三种矩形，使用定位器白色占据栅格空间。左边的spacing为0，右边的spacing为6。

verticalItemAlignment: enumeration

本属性处理垂直对齐，在文档中，很多时候相似的属性，说明集中在一起说明，所以文档是一致的。

设置栅格中子组件的水平对齐和垂直对齐。默认子组件垂直对齐到顶，水平对齐跟随栅格的layoutDirection。例如，layoutDirection为从左到右，组件将对齐到左边。

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

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

下边是如何对齐的例子：

Horizontal alignment	AlignLeft	AlignHCenter	AlignHCenter
Vertical alignment	AlignTop	AlignTop	AlignVCenter

当使用附加属性LayoutMirroring::enabled或通过设置layoutDirection进行镜像布局时，组件的可视水平对齐也被镜像。尽管如此，horizontalItemAlignment的属性不会改变。所以查询组件的有效水平对齐，使用effectiveHorizontalItemAlignment。