QML - Rectangle要素の片側のボーダー幅と色を制御する

Question

現在、ListViewコントロールの助けを借りてデリゲート矩形を描画する必要がありました。私はリストビュー内で水平または垂直の一連の矩形を描くことができましたが、問題は矩形の境界線にあります。隣接する矩形の交点の境界幅は、幅の2倍です。

デリゲート矩形は、Qtクイック矩形要素だけです。

矩形のいずれかの側の境界線の幅を制限することはできますか？

いずれかの側の色を変更することはできますか？ （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" 
     } 
    } 

} 

をすべて、1つまたは2つの側面に境界線を持つ長方形。

Answer 2

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

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：その下のコメントから素敵な拡張機能が追加されましたが、あなたはそれがその隣の代表者によって隠されていない選択を示すために、それを変更した場合ように、選択した項目の境界線は、他のすべての上に常にであることを確認します。