web-dev-qa-db-fra.com

QML - Contrôle la largeur et la couleur des bordures sur n'importe quel côté de l'élément Rectangle

Actuellement, je devais dessiner un rectangle de délégué à l'aide du contrôle ListView. J'ai pu dessiner une série de rectangles horizontaux ou verticaux dans la vue liste mais le problème est avec la bordure du rectangle. La largeur de la bordure au point d'intersection du rectangle adjacent est de deux fois la largeur.

Le rectangle délégué n'est rien d'autre qu'un élément Qt Quick Rectangle.

Est-il possible de limiter la largeur de la bordure d'un seul côté du rectangle?

Est-il possible de changer la couleur d'un côté? (Quelque chose de similaire à QLineEdit - Où nous pouvons contrôler la largeur et la couleur de la bordure par rapport aux côtés)

Cordialement, Santhosh.

qml
25
Santhosh

Vous pouvez créer un élément de bordure personnalisé comme ceci:

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

}

Dans cet exemple, j'ai utilisé l'élément personnalisé pour créer différents rectangles qui ont une bordure sur tous, un ou deux côtés.

29
Amit Tomar

La solution la plus simple pour un ListView est de donner à votre délégué une bordure de 1 pixel, puis d'utiliser un espacement de -1 pour que chaque cellule se chevauche de 1 pixel:

ListView {
    spacing: -1
    delegate: Rectangle {
        height: 40
        width: parent.width
        border.width: 1
        border.color: "black"
        z: listView.currentIndex === model.index ? 2 : 1
        ...
    }
    ...
}

Il devrait fonctionner de la même manière pour les autres largeurs de bordure.

EDIT: Ajout d'une amélioration agréable dans le commentaire ci-dessous qui garantit que la bordure de l'élément sélectionné est toujours au-dessus de tous les autres afin que si vous la modifiez pour indiquer la sélection, elle ne soit pas masquée par ses délégués voisins.

6
David K. Hess

Si vous essayez d'ajouter des bordures entre les éléments dans ListView, vous devez utiliser la propriété donnée 'spacing' pour établir une bordure commune entre chaque élément. Ensuite, vous pouvez potentiellement ajouter un arrière-plan à ListView pour personnaliser les couleurs de bordure.

Exemple:

ListView {
    spacing: 1 // or whatever you want the border to be
}

... Mais si vous voulez vraiment une bordure spécifique, vous pouvez toujours utiliser des rectangles pour créer vos propres bordures:

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

Un peu tard pour répondre mais la solution acceptée trace la frontière en dehors de la géométrie du rectangle ce qui peut être problématique dans certains cas.

Une autre façon de le faire est de faire quelque chose comme:

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

Cela peut ensuite être utilisé comme ceci:

CustomBorderRect
{
    width : 50
    height: 30
    color: "lightseagreen"

    lBorderwidth: 0
    rBorderwidth: 5
    tBorderwidth: 5
    bBorderwidth: 0
    borderColor: "lightyellow"
}

De cette façon, la bordure est dessinée avec la géométrie donnée.

1
Qutab Qazi