QML：TableView和Columns

Question

我注意到右侧的列始终与左侧列的数据重叠。如何改变这种行为？

带阴影的面板定义在TableViewColumn.delegate中。我需要面板与右侧单元格中的邻居重叠。

//代表问题的最小代码示例！

Page {
    TableView {
        anchors.fill: parent
        selectionMode: 1

        TableViewColumn {
            role: "login"
            title: "Login"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    height: 40
                    width: 150
                    color: "green"
                }
            }
        }

        TableViewColumn {
            role: "fullName"
            title: "FullName"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    height: 30
                    width: 150
                    color: "red"
                }
            }
        }

        TableViewColumn {
            role: "status"
            title: "Status"
            width: 100

            delegate: Rectangle {
                color: "transparent"
                anchors.fill: parent
                Rectangle{
                    anchors.verticalCenter: parent.verticalCenter
                    height: 20
                    width: 150
                    color: "blue"
                }
            }
        }

        model: ListModel {
            ListElement { text: "ghdjbf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
            ListElement { text: "sgkjdnf" }
        }

        property Component headerDelegate: BorderImage {
            property bool sortSwitcher: false
            height: 40
            id: tableHeader
            objectName: "TableHeader"

            Rectangle {
                id: viewableSection
                anchors.fill: parent
                color: "white" // "#f2f2f2"

                Text {
                    id: textItem
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignLeft
                    anchors.leftMargin: 25
                    font.pixelSize: 11
                    font.family: "Roboto"
                    text: styleData.value
                    font.bold: true
                    elide: Text.ElideRight
                    color: "#646464"
                    renderType: Text.NativeRendering
                }

                Rectangle {
                    id: bottomHeaderBorder
                    anchors.top: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 1
                    color: "#ebebeb"
                }

                Rectangle {
                    id: headerSeparator
                    z: 1
                    anchors.left: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 8
                    anchors.topMargin: 8
                    width: 1
                    color: "lightgrey"

                    MouseArea {
                        id: mouseAreaSeparator
                        hoverEnabled: true
                        anchors.fill: parent
                        cursorShape: Qt.SizeHorCursor
                        onEntered: {
                            mouseAreaSeparator.cursorShape = Qt.SizeVerCursor
                        }
                    }
                }
            }
        }

        property Component rowDelegate: Rectangle {
            id: rowDel
            objectName: "RowDelegate"
            height: 50
            //property color selectedColor: styleData.hasActiveFocus ? primaryColor : secondaryColor
            property bool selectionMaskVisible
            property bool selected: false

            Rectangle {
                id: rowSelectionMask
                anchors.fill: parent
                color: rowDel.selectionMaskVisible ? "#f2f2f2"  : "#ffffff"
                visible: parent.activeFocus ? false : true
                z: parent.activeFocus ? 1 : 2
            }

            Rectangle {
                id: activeFocusMask
                anchors.fill: parent
                color: parent.activeFocus ? styleData.row !== undefined ?  secondaryColor : "White" : "White"
                opacity: styleData.row !== undefined ? 0.9 : 0
                z: parent.activeFocus ? 2 : 1
            }

            MouseArea {
                id: rowMouseArea
                anchors.fill: parent
                hoverEnabled: true

                acceptedButtons: Qt.LeftButton | Qt.RightButton

                onEntered: {
                    if (styleData.row !== undefined)
                    {
                        rowDel.selectionMaskVisible = true
                    }
                }
                onExited: {
                    rowDel.selectionMaskVisible = false
                }
            }

            Rectangle {
                id: bottomBorder
                objectName: "BottomBorder"
                z: 2
                anchors.bottom: parent.bottom
                height: 1
                width: parent.width
                color: "#ebebeb"
                opacity: styleData.row !== undefined ? 1 : 0
            }
            Rectangle {
                id: separator
                z: 1
                anchors.left: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 1
                anchors.topMargin: 1
                width: 1
                color: "red"
            }
        }
    }
}

Answer 1

从 code 判断，没有干净的解决方案。

但正如您所看到的，TableViewColumn的代表由Loader通过Repeater实例化为Row。

因此要更改第二列顶部的第一列，我们需要更改z - 索引 - 而不是delegate本身（因为这只会影响到相同的Loader），但Loader。这可以在Component.onCompleted - 处理程序。

中实现

TableViewColumn {
    role: "login"
    title: "Login"
    width: 100

    delegate: Rectangle {
        color: "transparent"
        anchors.fill: parent
        Component.onCompleted: parent.z = 3 // <- Put the loader on top of its siblings
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            height: 40
            width: 150
            color: "green"
        }
    }

    Component.onCompleted: console.log(Object.keys(this))
}