如何设置HorizontalHeaderView的背景颜色 Qt QML Quick Controls 2 (Qt6.5)

Question

TableView 中的 HorizontalHeaderView 的背景颜色如何设置？

我的目标是一个标题具有深色背景和明亮文本颜色的表格。

可能的布局：

我既没能通过调色板获得它，也没有通过背景属性获得它。

我见过的唯一方法是在代表后面放置一堆彩色矩形，而那里的大小从来不与桌子大小匹配。 如果我只是在标题委托后面放置一个矩形，则由于列间距，顶部栏永远不会变成实心。

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0

...

    TableView {
        id: myTable
        anchors { fill: parent; topMargin: horizontalHeader.height }
        columnSpacing: 4; rowSpacing: 4
        implicitHeight: parent.height
        implicitWidth: parent.width

        model: SuperCarModel {}

        ...
    }    

    HorizontalHeaderView {
        id: horizontalHeader
        syncView: myTable
        anchors.left: myTable.left
        anchors.top: myTable.top
        clip: true

        delegate: Item {
            implicitHeight: delegateLabel.implicitHeight
            implicitWidth: delegateLabel.implicitWidth
            Label {
                id: delegateLabel
                text: model.display
                font.bold: true
                color: palette.buttonText
                padding: 4
                leftPadding: 4
            }
            Rectangle {
                anchors.left: delegateLabel.left
                anchors.top: delegateLabel.top
                anchors.bottom: delegateLabel.bottom
                color: "#aaa"
                z: delegateLabel.z - 1
            }
        }

期望 headerView 中有一个背景属性或者像这样的调色板条目

palette.background: "black"

Answer 1

这可能是瞎猜的，因为它是从 5.15 应用程序中提取的。希望这正是您所需要的。 标题栏是单独定义的，因此它的颜色也是单独定义的。最终结果如下所示：

ListView 定义如下：

        ListView {
            model: eventLog
            delegate: EventRow{}
            header: EventHeader{}
            headerPositioning: ListView.OverlayHeader
            clip: true
            focus: true
            anchors.fill: parent
            anchors.margins: parent.borderSize+3
            anchors.rightMargin: parent.borderSize-2
            ScrollBar.vertical: ScrollBar {
                id: scrollbar
                policy: ScrollBar.AlwaysOn
                width: parent.width/70
                background: Rectangle {
                    radius: width / 2
                }
            }

            onCountChanged: Qt.callLater(positionViewAtEnd)
        }

注意 delegate: 和 header: 是独立的组件，以下是“EventHeader”和“EventRow”的定义方式：

component EventHeader: Row {
    property var titles: [ "Time", "Net-Frame", "Type", "Node", "Code" , "Description" ]
    property var widths: [ 235, 140, 65, 65, 65, 651 ]
    height: 30
    width: ListView.view.width//-scrollbar.width-3
    z: 2

    Repeater {
        model: widths.length
        HeaderField { width: widths[index]; text: titles[index] }
    }
}

component EventRow: Row {
    width: ListView.view.width      //-scrollbar.width-3
    height: 30
    
    EventField {
        width: 235
        text: timeStamp
    }
    EventField {
        width: 140
        text: netFrame
    }
    EventField {
        width: 65
        text: severity
    }
    EventField {
        width: 65
        text: node
    }
    EventField {
        width: 65
        text: code
    }
    EventField {
        width: 651
        text: description
        horizontalAlignment: Qt.AlignLeft
    }
}

很抱歉过度使用组件。请注意，列宽也是单独定义的，因此需要匹配。

对于标题和数据，每行内的字段也是组件，HeaderField 和 EventField。

component EventField: Label {
    height: parent.height
    leftPadding: 5
    rightPadding: leftPadding
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    font.pixelSize: 24
    font.capitalization: Font.MixedCase
    color: ( severity === "Info" ) ? "blue" : (severity === "Warn" ) ? "orange" : "red" ;
    background: Rectangle {
        border.width: 1
        border.color: "dimgrey"
    }
}

component HeaderField: Label {
    height: parent.height
    leftPadding: 5
    rightPadding: leftPadding
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    font.pixelSize: 24
    font.capitalization: Font.MixedCase
    font.family: "Arial"
    color: "black"
    background: Rectangle {
        border.width: 1
        border.color: "dimgrey"
        color: "#E7E7E7"
    }
}

每个字段都有一个 background:，因此可以根据每个字段设置边框、填充和字体颜色。此代码仅在每行的基础上执行此操作。

它可能比你想要的更复杂。版本 6 中也可能略有不同。