得到一个带边框的矩形

可以先添加qml文件。命名为HasBorderRectangle.qml

然后在里面定义一个父矩形和子矩形，通过子矩形和父矩形的margin来形成边框，边框的颜色就是父矩形的颜色

//通过2个矩形，然后控制内部矩形的margin，来形成边框
Rectangle
{
    //定义这几个属性，在使用这个qml时，可指定这几个边框的值
    property int left_border: 0
    property int right_border: 0
    property int top_border: 0
    property int bottom_border: 0

    //定义内部矩形的背景颜色，在使用这个qml时，可指定内部矩形的背景颜色
    property string content_background_color: "red"

    //定义边框的颜色（其实就是外部矩形的背景颜色），在使用这个qml时，可指定边框的颜色
    property string border_color: "black"
    color:border_color


    Rectangle
    {
        //内部矩形先填充满外部矩形
        anchors.fill:parent
        color: content_background_color;
        //通过和父矩形的左外边距来形成边框
        anchors.leftMargin:left_border
        //其他几个边框同理
        anchors.rightMargin: right_border
        anchors.topMargin: top_border
        anchors.bottomMargin: bottom_border

    }


}

 然后在main.qml中调用这个矩形，通过给予不同的边框值和颜色可以获得不同的带边框矩形，如下：

import QtQuick

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

    Row
    {
        HasBorderRectangle
        {
            id:rect_1
            //上边框为5，边框颜色为红色的矩形
            top_border: 5
            content_background_color:"green"
            border_color: "red"
            width: 100
            height: 50
        }

        Rectangle
        {
            width: 10
            height: 50
        }

        HasBorderRectangle
        {
            id:rect_2
            bottom_border: 5
            content_background_color:"yellow"
            border_color: "blue"
            width: 100
            height: 50
        }

        Rectangle
        {
            width: 10
            height: 50
        }

        HasBorderRectangle
        {
            id:rect_3
            right_border: 5
            content_background_color:"purple"
            border_color: "orange"
            width: 100
            height: 50
        }

        Rectangle
        {
            width: 10
            height: 50
        }

        HasBorderRectangle
        {
            id:rect_4
            left_border: 5
            content_background_color:"gray"
            border_color: "pink"
            width: 100
            height: 50
        }

        Rectangle
        {
            width: 10
            height: 50
        }

        HasBorderRectangle
        {
            id:rect_5
            left_border: 5
            right_border: 5
            top_border: 5
            bottom_border: 5
            content_background_color:"black"
            border_color: "green"
            width: 100
            height: 50
        }
    }
}

 效果如下：