QML --> 定位器与Repeater(重复元素)

1、定位器Row

Row的就是行的意思，就是按从左到右方向排列。

2、定位器Column

Column（列）将它的子对象通过顶部对齐的方式进行排列。

3、定位器Grid

Grid（栅格）通过设置行数和列数将对象排列在一个栅格中，行数或列数可只设置一个，栅格元素会自动的计算子项目总数来获取配置。

4、定位器Flow

Flow（流），它有点向水一样。但是为了让流工作，必须指定一个宽度或高度，可以通过属性指定，或者通过anchor布局设置。

5、Repeater重复元素

通常与定位器一起使用。工作方式像for循环与迭代器模式一样。

例：

import QtQuick 2.0


Rectangle{
    id:root;
    width: 252;
    height: 252;
    property variant colorArray: ["#00dbe3", "#67bde3", "#ea7025"];

    Grid{　　// Row、Column、Flow
        anchors.fill: parent;
        anchors.margins: 8;
        spacing: 4; // 间隔
        Repeater{
            model: 16;　　// 子项目个数
            Rectangle{
                width: 56;
                height: 56;
                property int colorIndex: Math.floor(Math.random()*3);　　// Math.floor(Math.random()*3)生成0~2的随机数
                color: root.colorArray[colorIndex];
                border.color: Qt.lighter(color);
                Text {
                    anchors.centerIn: parent;
                    color: "#f0f0f0";
                    text: "Cell " + index
                }
            }
        }
    }
}