web-dev-qa-db-ja.com

QML-四角形要素のいずれかの側の境界線の幅と色を制御します

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

デリゲートレクタングルは、Qt Quick Rectangle要素にすぎません。

長方形の片側のみの境界幅を制限することは可能ですか？

片面の色を変えることはできますか？ （QLineEditに似たもの-辺に関してボーダーの幅と色を制御できる場所）

よろしく、サントッシュ。

qml
25
Santhosh

あなたはこのようなカスタムボーダー要素を作ることができます：

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つの辺に境界線を持つさまざまな長方形を作成しました。

29
Amit Tomar

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

他のボーダー幅でも同じように機能するはずです。

編集：選択したアイテムの境界線が常に他のアイテムの上にあることを確認できるように、コメントから素敵な拡張機能を追加しました。これを変更して選択を示すと、隣接するデリゲートによって隠されないようにします。

6
David K. Hess

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
    }
}
2
Jason Chan

少し遅れて回答しましたが、受け入れられた解決策は、長方形のジオメトリの外側に境界を描画します。これは、場合によっては問題になる可能性があります。

これを行う別の方法は、次のようなことです。

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

このようにして、ボーダーは指定されたジオメトリで描画されます。

1
Qutab Qazi