Qml：锚点

import QtQuick
import QtQuick.Window
Window {
    width: 800
    height: 600
    visible: true
    title: qsTr("Test Anchors")
    ///锚点 上下左右
    Rectangle
    {
        id: anchor1
        width:200
        height: 150
        color:"#EEEEEE"
        Rectangle
        {
            id:rect1
            width:50
            height:50
            color: "red"
            Text{text:"rect1"}
        }
        Rectangle
        {
            id:rect2
            width:50
            height:50
            color: "blue"
            Text{text:"rect2"}
            anchors.left: rect1.right
        }
        Rectangle
        {
            id:rect3
            width:50
            height:50
            color: "green"
            Text{text:"rect3"}
            anchors.top: rect1.bottom
        }
        Rectangle
        {
            id:rect4
            width:50
            height:50
            color: "pink"
            Text{text:"rect4"}
            anchors.left: rect3.right
            anchors.top: rect2.bottom
        }
    }
    ///锚点 动态大小
    Rectangle
    {
        id: anchor2
        anchors.left:anchor1.right
        anchors.leftMargin: 5 //左侧间距
        width:200
        height: 150
        color:"#EEEEEE"
        Rectangle
        {
            id:leftpage
            width: 50
            color:"blue"
            anchors.top: parent.top         //自动拉升高度
            anchors.bottom: parent.bottom
            Text{text:"left"}
        }
        Rectangle
        {
            id:mainpage
            color:"pink"
            anchors.top: parent.top         //自动拉升高度
            anchors.bottom: parent.bottom
            anchors.left:leftpage.right     //自动拉升宽度
            anchors.right: rightpage.left
            Text{text:"main"}
        }
        Rectangle
        {
            id:rightpage
            width: 50
            color:"green"
            anchors.top: parent.top         //自动拉升高度
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            Text{text:"right"}
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                parent.width +=10
                parent.height +=10
            }
        }
    }
    Rectangle
    {
        id:anchor3
        //通过anchor2、和窗口 锚定宽高和位置
        anchors.left: anchor2.right
        anchors.right: parent.right
        anchors.top: anchor2.top
        anchors.bottom: anchor2.bottom
        anchors.leftMargin: 5
        color:"#EEEEEE"
        //水平居中
        Rectangle
        {
            id:hcenter
            color:"red"
            width:50
            //拉升高度
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            //水平居中
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle
        {
            width:50
            height: 50
            color:"blue"
            //垂直居中
            anchors.verticalCenter:hcenter.verticalCenter
            anchors.left: hcenter.right
        }
        //完全居中
        Rectangle
        {
            width:50
            height: 50
            color:"yellow"
            anchors.centerIn: parent
        }
    }
}