How to make a rectangle border in rowdelegate (TableVIew)

Question

So the subject is basicaly what I'm asking.

TableViewStyle 
{

    Component {

        id: header
        Rectangle {
            anchors.topMargin: 5
            height: 22
            anchors.verticalCenter: parent.verticalCenter
            color: "#6d6e70"
            Text {
                anchors.fill: parent
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.Center
                verticalAlignment: Text.AlignVCenter
                text: styleData.value
                color: "white"
                renderType: Text.NativeRendering
            }
            Rectangle {
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 1
                anchors.topMargin: 1
                width: 1
                color: "black"
            }
        }
    }
    Component {
        id: defaultRow
        Rectangle {
            height: 30
            property color selectedColor: styleData.row % 2 ? "#fbfbfc" : "white"
            color: styleData.selected ? "#999" : selectedColor
            Rectangle {
                width: 1
                color: "black"
            }
        }

    }
    Component {
        id: largeRow
        Rectangle {
            height: 120
            property color selectedColor: styleData.row % 2 ? "#fbfbfc" : "white"
            color: styleData.selected ? "#999" : selectedColor
            Rectangle {
                width: 1
                color: "black"
            }
        }
    }

    Component {
        id: imageDelegate
        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            fillMode: Image.PreserveAspectFit
            cache: true;
            asynchronous: true;
            source: styleData.value
        }
    }
}

For headers there is a border with width 1 and black color, but for rows it isn't working even if I use the saming parametrs. How do i generate borders for rowdelegate?

Velkan Velkan · Accepted Answer · 2016-01-23T17:08:52

You can hack something like that:

Rectangle {
    color: "black"

    Rectangle {
        anchors.fill: parent
        anchors.rightMargin: 1

        color: "white"
    }
}

(don't assume that I've understood the question)

update

(Thanks to Mitch for data example)

You want something like that for the column borders?

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Window {
    id: win
    width: 360
    height: 360
    visible: true

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    TableView {
        anchors.fill: parent

        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }
        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
        model: libraryModel

        style: TableViewStyle {
            itemDelegate: Rectangle {
                width: 200
                height: 200

                color: "black"

                Rectangle {
                    anchors.fill: parent
                    anchors.rightMargin: 1

                    color: "white"

                    Text {
                        id: textItem
                        anchors.fill: parent
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: styleData.textAlignment
                        anchors.leftMargin: 12
                        text: styleData.value
                        elide: Text.ElideRight
                        color: textColor
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }
}

How to make a rectangle border in rowdelegate (TableVIew)

1 Answers