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

出来的效果：