如何在 rowdelegate 中制作矩形边框（TableVIew）

Question

所以主题基本上就是我要问的。

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

对于标题，有一个宽度为 1 和黑色的边框，但对于行，即使我使用相同的参数，它也不起作用。如何为rowdelegate 生成边框？

Answer 1

你可以破解类似的东西：

Rectangle {
    color: "black"

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

        color: "white"
    }
}

（不要以为我已经理解了这个问题）

更新

（感谢Mitch提供数据示例）

你想要这样的列边框吗？

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