一、自定义矩形

效果图

边框大小为：左2 上2 右5 下10

简单来说，就是定义两个矩形，一个在外边一个在内部；

再通过设置他们的边距，即可设置相应的边框宽度；

1.编码

新建空的qml文件

MyRectangle.qml

import QtQuick 2.0Rectangle {id: borderRectproperty int innerTopMargin: 0        // 上边距property int innerBottomMargin: 0     // 下边距property int innerLeftMargin: 0       // 左边距property int innerRightMargin: 0      // 右边距property string innerColor: "white"   // 矩形颜色property string bodercolor: "black"   // 边框颜色width: 100height: 50color: innerColorRectangle {id: innerRectcolor: bodercoloranchors.fill: parent    // 填充满父类anchors.topMargin: innerTopMarginanchors.bottomMargin: innerBottomMarginanchors.leftMargin: innerLeftMarginanchors.rightMargin: innerRightMargin}
}

2.使用

// 自定义矩形                                                 
MyRectangle {                                               height: 100                                             width: 200                                              innerTopMargin: 2       // 顶部边框大小                       innerBottomMargin: 10   // 底部                           innerLeftMargin: 2      // 左边                           innerRightMargin: 5     // 右边                           bodercolor: "black"    // 边框颜色                         innerColor: "yellow"     // 矩形颜色                          // 居中                                                   anchors.verticalCenter: parent.verticalCenter           anchors.horizontalCenter: parent.horizontalCenter       //anchors.centerIn: parent                              
}                                                  

二、九宫格

可以使用矩形的相对位置，去设置一个九宫格出来；

即 以下这四个属性

anchors.top        anchors.left        anchors.right        anchors.bottom

源码如下：

import QtQuick 2.9
import QtQuick.Window 2.2import QtQuick.Controls 2.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")color: "white"MyRectangle {id: rect1x: 50y: 50height: 50width: 100innerTopMargin: 2       // 顶部边框大小innerBottomMargin: 10   // 底部innerLeftMargin: 2      // 左边innerRightMargin: 5     // 右边bodercolor: "black"    // 边框颜色innerColor: "yellow"     // 矩形颜色}MyRectangle {id: rect2y: rect1.ywidth: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.left: rect1.rightanchors.leftMargin: 5}MyRectangle {id: rect3y: rect1.ywidth: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.left: rect2.rightanchors.leftMargin: 5}MyRectangle {id: rect4x: rect1.xy: rect1.ywidth: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect1.bottomanchors.topMargin: 5}MyRectangle {id: rect5width: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect2.bottomanchors.left: rect4.rightanchors.leftMargin: 5anchors.topMargin: 5}MyRectangle {id: rect6width: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect3.bottomanchors.left: rect5.rightanchors.leftMargin: 5anchors.topMargin: 5}MyRectangle {id: rect7x: rect1.xy: rect1.ywidth: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect4.bottomanchors.topMargin: 5}MyRectangle {id: rect8width: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect5.bottomanchors.left: rect7.rightanchors.leftMargin: 5anchors.topMargin: 5}MyRectangle {id: rect9width: rect1.widthheight: rect1.heightinnerTopMargin: rect1.innerTopMargininnerBottomMargin: rect1.innerBottomMargininnerLeftMargin: rect1.innerLeftMargininnerRightMargin: rect1.innerRightMarginbodercolor: rect1.bodercolorinnerColor: rect1.innerColoranchors.top: rect6.bottomanchors.left: rect8.rightanchors.leftMargin: 5anchors.topMargin: 5}
}