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, вы должны использовать заданное свойство 'интервал', чтобы установить общую границу между каждым элементом. Затем вы можете добавить фон в 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 
     ... 
    } 
    ... 
} 

Он должен работать одинаково для других границ ширины.

EDIT: добавлено хорошее улучшение от комментария ниже, что гарантирует, что граница выбранного элемента всегда выше всех остальных, так что если вы измените его, указав выбор, он не будет закрыт соседними делегатами.