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
                }
            }
        }
    }
}