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 } }