Qt_QML定位元素學習

• Column（列）元素將它的子對象通過頂部對齊的列方式進行排列。spacing屬性用來設置每個元素之間的間隔大小。
• Row（行）元素將它的子對象從左到右，或者從右到左依次排列，排列方式取決於layoutDirection屬性。spacing屬性用來設置每個元素之間的間隔大小。
• Grid（柵格）元素通過設置rows（行數）和columns（列數）將子對象排列在一個柵格中。可以只限制行數或者列數。如果沒有設置它們中的任意一個，柵格元素會自動計算子項目總數來獲得配置，例如，設置rows（行數）爲3，添加了6個子項目到元素中，那麼會自動計算columns（列數）爲2。屬性flow（流）與layoutDirection（佈局方向）用來控制子元素的加入順序。spacing屬性用來控制所有元素之間的間隔。
• Flow（流）。通過flow（流）屬性和layoutDirection（佈局方向）屬性來控制流的方向。它能夠從頭到底的橫向佈局，也可以從左到右或者從右到左進行佈局。作爲加入流中的子對象，它們在需要時可以被包裝成新的行或者列。爲了讓一個流可以工作，必須指定一個寬度或者高度，可以通過屬性直接設定，或者通過anchor（錨定）佈局設置。

通常Repeater（重複元素）與定位器一起使用。它的工作方式就像for循環與迭代器的模式一樣。

// 基礎  RedSquare.qml
import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "red"
    border.color: Qt.lighter(color)
}

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 700
    height: 525
    title: qsTr("Hello World")

	// Column（列）元素
    Column {
        id: column
        x: 10
        y: 10
        spacing: 8
        RedSquare { }
        GreenSquare { width: 96 }
        BlueSquare { }
    }

	// Row（行）元素
    Row {
        id: row
        x: 10
        y: 200
        spacing: 20
        BlueSquare { }
        GreenSquare { }
        RedSquare { }
    }

	// Grid（柵格）
    Grid {
        id: grid
        rows: 2
        columns: 2
        x: 300
        y: 10
        spacing: 8
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

    // 不成功
    // Flow（流）
//    Flow {
////        anchors.fill: parent
//        x: 600
//        y: 10
//        anchors.margins: 20
//        spacing: 20
//        RedSquare { }
//        BlueSquare { }
//        GreenSquare { }
//    }

	// Repeater（重複元素）
    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
    Grid{
//        anchors.fill: parent
        x: 10
        y: 280
        anchors.margins: 8
        spacing: 4

        Repeater {
            model: 16
            Rectangle {
                width: 56; height: 56
                property int colorIndex: Math.floor(Math.random()*3)
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)
                    Text {
                        anchors.centerIn: parent
                        color: "#f0f0f0"
                        text: "Cell " + index
                    }
            }
        }
    }
}

效果圖：