QML - 控制Rectangle元素任何一侧的边框宽度和颜色

Question

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

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

是否可以仅限制矩形任何一侧的边框宽度？

是否可以改变任何一方的颜色？ （类似于QLineEdit的东西 - 我们可以控制边界宽度和颜色相对于边）

此致，Santhosh。

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

}

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

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中的项目之间添加边框，则应使用给定属性“spacing”在每个项目之间建立公共边框。然后，您可以向ListView添加背景以自定义边框颜色。

例：

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

...但是如果你真的想要一个特定的边框，你总是可以使用矩形来制作自己的边框：

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