Grid属性说明

继承自 Item
相关控件：Flow Row

Grid是一种将其子项定位在网格形成中的类型。Grid创建一个单元格网格，其大小足以容纳其所有子项目，并将这些项目从左到右和从上到下放置在单元格中。每个项目都位于其位置（0，0）的单元格的左上角。

本文: https://www.lovejia.win/blog/article/Grid.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-grid.html
参考译文：http://blog.csdn.net/vampire_armand/article/details/39232553

属性说明

add : Transition

往Grid中增加组件或先创建位置，后给位置相应的子组件或一个组件由不可见变得可见时，这个过渡触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。
注意：在Grid创建时已经是Grid的一部分的子组件不会触发这个过渡，取代的，是触发populate过渡。

bottomPadding : real / leftPadding : real / padding : real / rightPadding : real / topPadding : real

这些属性在内容周围保留了填充。

columnSpacing : qreal

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

columns : int

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

effectiveHorizontalItemAlignment : enumeration / horizontalItemAlignment : enumeration / verticalItemAlignment : enumeration

这是只读的。设置栅格中子组件的水平对齐和垂直对齐。默认子组件垂直对齐到顶，水平对齐跟随栅格的layoutDirection。例如，layoutDirection为从左到右，组件将对齐到左边。
horizontalItemAlignment的有效值：Grid.AlignLeft、Grid.AlignRight和Grid.AlignHCenter。
verticalItemAlignment的有效值：Grid.AlignTop、Grid.AlignBottom和Grid.AlignVCenter。

effectiveLayoutDirection : enumeration

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

flow : enumeration

布局的流动方向。可能的值为：
Grid.LeftToRight(默认) -根据layoutDirection 定位下一个子组件。当宽度超过限制，开始在下一行开始定位组件。
Grid.TopToBottom-从顶到底定位下一个子组件，高度超过限制，开始在下一列定位组件。

layoutDirection : enumeration

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

move : Transition

当由于添加，移除或重新排列子组件导致组件失去当前所处的位置，或改变组件的大小导致子组件失去位置时，这个过渡被触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。
注意：对这个过渡来说，只有当过渡被在移动组件的位置添加组件而失去位置所触发时，ViewTransition.targetIndexes和ViewTransition.targetItems列表才被设置。其他情况，列表是空的。
注意：在Qt Quick 1，Grid被创建时的所有存在子组件，都使用这个过渡。而在Qt Quick 2中，使用populate这个过渡来处理Grid的第一次创建。

populate : Transition

Grid第一次被创建时，已经是Grid的一部分的子组件触发的过渡。过渡能用ViewTransition属性去访问添加在子组件上的细节。

rowSpacing : qreal

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

rows : int

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

spacing : qreal

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

功能简述

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网格布局就是在网格上面安置Item，可以通过设置他的rows，columns来控制网格的行列书，Grid默认的是4*4的，Grid默认的流是LeftToRight，从左到右安置Item，一行放满再放到下一行中，可以通过修改Grid的flow属性来控制他，比如修改成TopToBottom。
以下示例网格布局：

import QtQuick 2.0

Rectangle{

    width: 360;
    height: 240;
    color:"#eeeeee";
    id: rootItem;


    Text{
        id: centerText;
        text:"A Signal Text.";
        anchors.centerIn: parent;
        font.pixelSize: 24;
        font.bold: true;
    }


    function setTextColor(clr){
        centerText.color = clr;
    }


    Grid{

        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        rows: 3;
        columns: 3;
        rowSpacing: 4;
        columnSpacing: 4;

        //描述表格的流模式，如果是LeftToRight 从左到右填充一行，满了就填充第二行
        flow: Grid.TopToBottom;

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }


        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }

        ColorPicker{
            color: Qt.rgba(Math.random() , Math.random() , Math.random() , 1.0 );
            onColorPicked: setTextColor(clr);
        }
    }
}