anchor锚点动态定位

import QtQuick
import QtQuick.Window 2.12

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

    Rectangle {
        id: anchor1
        width: 200
        height: 200
        color: "red"

        Rectangle {
            id: rect1
            color: "green"
            Text {
                text: qsTr("rect1")
            }
            width: 50
            height: 50
        }

        Rectangle {
            id: rect2
            color: "blue"
            width: 50
            height: 50
            anchors.left: rect1.right
            Text {text: qsTr("rect2")}
        }

        Rectangle {
            id: rect3
            color: "yellow"
            width: 50
            height: 50
            Text {text: qsTr("rect3")}
            anchors.top: rect1.bottom
        }

        Rectangle {
            id: rect4
            color: "grey"
            width: 50
            height: 50
            Text {text: qsTr("rect3")}
            anchors.top: rect2.bottom
            anchors.left: rect3.right
        }
    }

    // 动态大小
    Rectangle {
        id: anchor2
        anchors.left: anchor1.right
        anchors.leftMargin: 5 // 左侧间距
        width: 200
        height: 200
        color: "green"
        Rectangle {
            id: leftpage
            width: 50
            color: "red"
            anchors.top: parent.top
            anchors.bottom: parent.bottom
        }
        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
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                parent.width += 10
                parent.height += 10
            }
        }
    }

    Rectangle {
        id: anchor3
        color: "grey"
        anchors.left: anchor2.right
        anchors.right: parent.right
        anchors.top: anchor2.top
        anchors.bottom: anchor2.bottom

        // 水平居中
        Rectangle {
            id: hcenter
            color: "red"
            width: 50
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }

        // 垂直居中
        Rectangle {
            width: 50
            height: 50
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: hcenter.right
        }

        Rectangle {
            width: 50
            height: 50
            color: "yellow"
            anchors.centerIn: parent
            z: 3
        }
    }
}