Qt_QML佈局元素（ Layout Items）

QML使用anchors（錨）對元素進行佈局。 anchoring（錨定） 是基礎元素對象的基本屬性， 可以被所有的可視化QML元素使用。 一個anchors（錨）就像一個協議，並且比幾何變化更加強大。 Anchors（錨）是相對關係的表達式， 你通常需要與其它元素搭配使用。

一個元素有6條錨定線（ top頂，bottom底，left左，right右，horizontalCenter水平中，verticalCenter垂直中）。在文本元素（Text Element）中有一條文本的錨定基線（baseline）。每一條錨定線都有一個偏移（offset）值，在top（頂），bottom（底）， left（左），right（右）的錨定線中它們也被稱作邊距。對於horizontalCenter（水平中）與verticalCenter（垂直中）與baseline（文本基線）中被稱作偏移值。

// GreenSquare.qml
import QtQuick 2.0

Rectangle{
    width: 100
    height: 100
    color: "Green"
    border.color: Qt.lighter(color)
}

// BlueSquare.qml
import QtQuick 2.0

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

// main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.VirtualKeyboard 2.2

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

    // 填充父類
    GreenSquare {
        x: 10
        y: 10
        id: root1
        BlueSquare {
            width: 12
            anchors.fill: root1
            anchors.margins: 8
            Text {
                id: name
                text: "(1)"
            }
        }
    }

    // 左對齊父元素
    GreenSquare {
        x: 150
        y: 10
        id: root2
        BlueSquare {
            width: 48
            y: 8
            id: sub1
            anchors.left: root2.left
            anchors.leftMargin: 8
            Text {
                id: name1
                anchors.centerIn: sub1
                text: "(2)"
            }
        }
    }

    // 元素左邊與父元素右邊對齊
    GreenSquare {
        x: 300
        y: 10
        id: root3
        BlueSquare {
            width: 48
            anchors.left: root3.right
            id: sub2
            Text {
                id: name2
                anchors.centerIn: sub2
                text: "(3)"
            }
        }
    }

    // 元素中間對齊
    // blue1 與它的父元素水平中間對齊
    // blue2 與blue1中間對齊，並且它的頂部對齊blue1的底部
    GreenSquare {
        x: 500
        y: 10
        id: root4

        BlueSquare {
            id: blue1
            width: 48; height: 24
            y: 8
            anchors.horizontalCenter: root4.horizontalCenter
        }

        BlueSquare {
            id: blue2
            width: 72; height: 24
            anchors.top: blue1.bottom
            anchors.topMargin: 4
            anchors.horizontalCenter: blue1.horizontalCenter
            Text {
                id: name3
                anchors.centerIn: blue2
                text: "(4)"
            }
        }
    }

    // 元素在它的父元素中居中
    GreenSquare {
        id: root5
        x: 10
        y: 150
        BlueSquare {
            width: 48
            anchors.centerIn: root5
            id: blue3
            Text {
                id: name4
                anchors.centerIn: blue3
                text: "(5)"
            }
        }
    }

    // 元素水平方向居中對齊父元素並向後偏移12像素,垂直方向居中對齊。
    GreenSquare {
        id: root6
        x: 150
        y: 150
        BlueSquare {
            width: 48
            id: blue4
            anchors.horizontalCenter: root6.horizontalCenter
            anchors.horizontalCenterOffset: -12
            anchors.verticalCenter: root6.verticalCenter
            Text {
                id: name5
                anchors.centerIn: blue4
                text: "(6)"
            }
        }
    }
}

出來的效果：