QML - Control border width and color on any one side of Rectangle element

Question

Currently i had a requirement of drawing a delegate rectangle with the help of ListView control. I was able to draw a series of rectangle either horizontal or vertical within the list view but the problem is with the border of the rectangle. The border width at the intersect point of the adjacent rectangle is of twice the width.

The delegate rectangle is nothing but a Qt Quick Rectangle element.

Is it possible to limit the border width on any one side of the rectangle alone?

Is it possible to change the color on any one side? (Something similar to QLineEdit - Where we can control the border width and color with respect to the sides)

Regards, Santhosh.

Answer 1

You can make a custom border element like this :

CustomBorder.qml

import QtQuick 1.0

Rectangle
{

    property bool commonBorder : true

    property int lBorderwidth : 1
    property int rBorderwidth : 1
    property int tBorderwidth : 1
    property int bBorderwidth : 1

    property int commonBorderWidth : 1

    z : -1

    property string borderColor : "white"

    color: borderColor

    anchors
    {
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: parent.bottom

        topMargin    : commonBorder ? -commonBorderWidth : -tBorderwidth
        bottomMargin : commonBorder ? -commonBorderWidth : -bBorderwidth
        leftMargin   : commonBorder ? -commonBorderWidth : -lBorderwidth
        rightMargin  : commonBorder ? -commonBorderWidth : -rBorderwidth
    }
}

main.qml

import QtQuick 1.0

Rectangle
{
    width:  500
    height: 500
    color: "grey"

    Rectangle
    {
        anchors.centerIn: parent
        width : 300
        height: 300
        color: "pink"

        CustomBorder
        {
            commonBorderWidth: 3
            borderColor: "red"
        }
    }


    Rectangle
    {
        anchors.centerIn: parent
        width : 200
        height: 200
        color: "green"

        CustomBorder
        {
            commonBorder: false
            lBorderwidth: 10
            rBorderwidth: 0
            tBorderwidth: 0
            bBorderwidth: 0
            borderColor: "red"
        }
    }


    Rectangle
    {
        anchors.centerIn: parent
        width : 100
        height: 100
        color: "yellow"

        CustomBorder
        {
            commonBorder: false
            lBorderwidth: 0
            rBorderwidth: 0
            tBorderwidth: 10
            bBorderwidth: 10
            borderColor: "blue"
        }
    }

}

In this example I have used the custom element to make different rectangles which have border on all, one or two sides.