QML - 在矩形元素的任何一边控制边框的宽度和颜色

Question

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

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

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

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

Regards， 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中的项目之间添加边框，则应使用给定属性'间距'在每个项目之间建立公用边框。然后，您可以添加背景到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 3

的一个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 
     ... 
    } 
    ... 
} 

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

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