main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5

Window {
    
    visible: true
    width: 640
    height: 480
    title: qsTr("My QML")
    color: "white"

    MyRectangle {
    
        x: 100
        y: 50
        width: 200
        height: 100
//        myTopMargin: 10
//        myBottomMargin: 10
    }

//    Rectangle {
    
//        x: 100
//        y: 30
//        width: 100
//        height: 50
//        color: "black"
        anchors.centerIn: parent    //居中于父控件
        anchors.horizontalCenter: parent.horizontalCenter //水平居中
        anchors.verticalCenter: parent.verticalCenter //垂直居中

        rotation: 30  //旋转

        scale: 0.5  //放缩

        antialiasing: false //抗锯齿

//        //边框
//        border.width: 5
//        border.color: "red"

//        //圆角弧度
//        radius: 15

//    }

    //GradientStop颜色层次变化效果
//    Rectangle {
    
//          y: 100; width: 80; height: 80
//          rotation: 45
//          gradient: Gradient {
    
//              GradientStop { position: 0.0; color: "lightsteelblue" }
//              GradientStop { position: 1.0; color: "blue" }
//          }
//      }

//    Rectangle {
    
//        x: 50
//        y: 30
//        width: 100
//        height: 50
//        border.width: 5
//        border.color: "black"
//    }

    //坐标 z 使用；焦点使用；
//    Rectangle {
    
//        x: 100
//        y: 100
//        z: 3
//        width: 100
//        height: 50
//        color: "black"
//        focus: true //焦点
//        //activeFocus:

//        MouseArea {
    
//            anchors.fill: parent
//            onClicked: {
    
//                console.log("on clicked")
//            }
//        }
//        Keys.onReturnPressed: {
    
//            console.log("on return pressed")
//        }
//    }

//    Rectangle {
    
//        x: 120
//        y: 120
//        width: 100
//        height: 50
//        color: "blue"
//    }

//    Rectangle {
    
//        x: 140
//        y: 140
//        z: 2
//        width: 100
//        height: 50
//        color: "green"
//    }

    //锚点anchor使用
//    Rectangle {
    
//        id: rect1
        anchors.fill: parent    //填充在父控件当中
//        width: 100
//        height: 50
//        color: "black"
//    }

//    Rectangle {
    
        x: rect1.width + 20
//        id: rect2
//        width: 100
//        height: 50
//        anchors.left: rect1.right   //使用锚点，将两个矩形挨在一起
//        anchors.leftMargin: 20
//        color: "black"
//    }

//    Rectangle {
    
//        id: rect3
//        width: 100
//        height: 50
//        anchors.top: rect1.bottom
//        anchors.topMargin: 20
//        color: "black"
//    }
}

MyRectangle.qml

import QtQuick 2.0

Rectangle {
    
    id: borderRect
    property int myTopMargin: 0
    property int myBottomMargin: 0
    width: 200
    height: 100
    color: "black"
    Rectangle {
    
        id: innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.leftMargin: 5
        anchors.rightMargin: 5
    }
}