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

它应该与其他边框宽度相同。

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

Answer 3

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

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

通过这种方式可以使用给定的几何图形绘制边框。

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

4 个答案: