qml - QML - 控制矩形元素任意一侧的边框宽度和颜色

Question

目前我需要在 ListView 控件的帮助下绘制一个委托矩形。我能够在列表视图中绘制一系列水平或垂直的矩形，但问题在于矩形的边框。相邻矩形相交点的边框宽度是宽度的两倍。

委托矩形只不过是一个 Qt Quick Rectangle 元素。

是否可以单独限制矩形任意一侧的边框宽度？

可以改变任何一侧的颜色吗？（类似于 QLineEdit - 我们可以控制边框宽度和颜色相对于边）

问候，桑托什。

Answer 1

您可以像这样制作自定义边框元素：

自定义边框.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"
        }
    }

}

在这个例子中，我使用自定义元素制作了不同的矩形，这些矩形在所有、一侧或两侧都有边框。

Answer 2

ListView 最简单的解决方案是给您的委托一个 1 像素的边框，然后使用 -1 的间距使每个单元格与另一个单元格重叠 1 个像素：

ListView {
    spacing: -1
    delegate: Rectangle {
        height: 40
        width: parent.width
        border.width: 1
        border.color: "black"
        z: listView.currentIndex === model.index ? 2 : 1
        ...
    }
    ...
}

对于其他边框宽度，它应该同样有效。

编辑：从下面的评论中添加了一个很好的增强功能，确保所选项目的边框始终高于所有其他边框，这样如果您更改它以指示选择它不会被其邻居代表遮挡。

Answer 3

如果您尝试在 ListView 中的项目之间添加边框，则应使用给定的属性“间距”在每个项目之间建立公共边框。然后，您可能会向 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
    }
}

Answer 4

回答有点晚了，但公认的解决方案在矩形的几何形状之外绘制边框，这在某些情况下可能会出现问题。

另一种方法是执行以下操作：

// CustomBorderRect.qml
import QtQuick 2.12

Item
{
    property alias color: innerRect.color

    property alias borderColor : borderRect.color
    property int borderWidth: 0

    property int lBorderwidth : borderWidth
    property int rBorderwidth : borderWidth
    property int tBorderwidth : borderWidth
    property int bBorderwidth : borderWidth

    Rectangle
    {
        id: borderRect
        anchors.fill: parent

        Rectangle
        {
            id: innerRect

            anchors {
                fill: parent

                leftMargin: lBorderwidth
                rightMargin: rBorderwidth
                topMargin: tBorderwidth
                bottomMargin: bBorderwidth
            }
        }
    }
}

然后可以这样使用：

CustomBorderRect
{
    width : 50
    height: 30
    color: "lightseagreen"

    lBorderwidth: 0
    rBorderwidth: 5
    tBorderwidth: 5
    bBorderwidth: 0
    borderColor: "lightyellow"
}

这样边界是用给定的几何图形绘制的。