QML 自定义矩形框Rectangle，实现四个边框自定义大小

一、自定义矩形

效果图

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

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

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

1.编码

新建空的qml文件

MyRectangle.qml

import QtQuick 2.0

Rectangle {
    id: borderRect
    property int innerTopMargin: 0        // 上边距
    property int innerBottomMargin: 0     // 下边距
    property int innerLeftMargin: 0       // 左边距
    property int innerRightMargin: 0      // 右边距
    property string innerColor: "white"   // 矩形颜色
    property string bodercolor: "black"   // 边框颜色

    width: 100
    height: 50
    color: innerColor

    Rectangle {
        id: innerRect
        color: bodercolor

        anchors.fill: parent    // 填充满父类
        anchors.topMargin: innerTopMargin
        anchors.bottomMargin: innerBottomMargin
        anchors.leftMargin: innerLeftMargin
        anchors.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.2

import QtQuick.Controls 2.2

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


    MyRectangle {
        id: rect1
        x: 50
        y: 50
        height: 50
        width: 100

        innerTopMargin: 2       // 顶部边框大小
        innerBottomMargin: 10   // 底部
        innerLeftMargin: 2      // 左边
        innerRightMargin: 5     // 右边

        bodercolor: "black"    // 边框颜色
        innerColor: "yellow"     // 矩形颜色
    }

    MyRectangle {
        id: rect2
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.left: rect1.right
        anchors.leftMargin: 5
    }

    MyRectangle {
        id: rect3
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.left: rect2.right
        anchors.leftMargin: 5
    }

    MyRectangle {
        id: rect4
        x: rect1.x
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect1.bottom
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect5
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect2.bottom
        anchors.left: rect4.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }


    MyRectangle {
        id: rect6
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect3.bottom
        anchors.left: rect5.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect7
        x: rect1.x
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect4.bottom
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect8
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect5.bottom
        anchors.left: rect7.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect9
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect6.bottom
        anchors.left: rect8.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }
}