QML - ширина и цвет границы управления на любой стороне элемента Rectangle

В настоящее время у меня было требование рисовать прямоугольник делегата с помощью элемента управления ListView. Я смог нарисовать серию прямоугольников, горизонтальных или вертикальных в виде списка, но проблема связана с границей прямоугольника. Ширина границы в точке пересечения смежного прямоугольника имеет ширину в два раза.

Прямоугольник делегата - это не что иное, как элемент Qt Quick Rectangle.

Можно ли ограничить ширину границы только на одной стороне прямоугольника?

Можно ли изменить цвет с одной стороны? (Что-то похожее на QLineEdit - где мы можем контролировать ширину и цвет границы по сторонам)

С уважением, Сантош.

Ответ 1

Вы можете создать пользовательский элемент границы следующим образом:

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

}

В этом примере я использовал пользовательский элемент для создания разных прямоугольников, имеющих границу на всех, на одной или двух сторонах.

Ответ 2

Если вы пытаетесь добавить границы между элементами в ListView, вы должны использовать заданное свойство spacing ', чтобы установить общую границу между каждым элементом. Затем вы можете добавить фон в ListView для настройки цветов границ.

Пример:

ListView {
    spacing: 1 // or whatever you want the border to be
}

... Но если вы действительно хотите определенную границу, вы всегда можете использовать Rectangles для создания собственных границ:

Item { // this is your 'rectangle'
    Rectangle { // the main thing
        id: rec
        anchors.fill: parent
        anchors.leftMargin: 2
        anchors.rightMargin: 5
        // etc
    }

    Rectangle { // a border example
        anchors.right: rec.right
        height: parent.height
        width: 5
        color: "red"
        // etc
    }
}