Question

我在Qt5中使用TableView作为我的应用程序。可以更改此表的行的颜色（背景，文本和替代），但没有更改标题（标题）颜色的选项。

怎么做？

Answer 1

有选项：headerDelegate。您可以使用TableView或TableViewStyle中的那个。以下是headerDelegate样式的Base实现示例：

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 {
        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }
        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
        model: libraryModel

        style: TableViewStyle {
            headerDelegate: Rectangle {
                height: textItem.implicitHeight * 1.2
                width: textItem.implicitWidth
                color: "lightsteelblue"
                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
                }
                Rectangle {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 1
                    anchors.topMargin: 1
                    width: 1
                    color: "#ccc"
                }
            }
        }
    }
}

screenshot

您可能已经注意到，标题末尾有一个“颜色故障”（见上面的截图）。这是因为，默认情况下，backgroundColor属性设置为white。更改它以匹配标题颜色可以解决问题，即将以下行添加到TableViewStyle实现中：

backgroundColor : "lightsteelblue"

Answer 2

Mitch 的例子是一个很好的基础，但它对我来说并不是很好。调整大小线未正确显示，我也想有一个底线。这对我来说效果更好（在 Qt5.12 上测试）：

    SystemPalette { id: myPalette; }

    style: TableViewStyle {
        backgroundColor: myPalette.base
        headerDelegate: Item {
            height: textLine.implicitHeight * 1.2 + 1

            Rectangle {
                color: myPalette.light
                height: textLine.implicitHeight * 1.2
                Text {
                    id: textLine
                    anchors.fill: parent
                    color: myPalette.text
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: styleData.textAlignment
                    text: styleData.value
                    anchors.leftMargin: 8
                    elide: Text.ElideRight
                    renderType: Text.NativeRendering
                }
            }
            Rectangle {
                anchors.left: parent.left 
                anchors.right: parent.right 
                height: 1
                y: textLine.implicitHeight * 1.2
                color: myPalette.mid 
            }
            Rectangle {
                anchors.top: parent.top 
                anchors.bottom: parent.bottom 
                width: 1
                anchors.right: parent.right
                color: myPalette.mid
            }
        }
    }

我也依赖调色板。这具有使用 macOS 暗模式和亮模式的额外好处。

实际上，mid 对于黑暗模式来说有点暗……但是在黑暗模式下，我发现 macOS 中的许多对比度无论如何都有些弱，所以也许这还可以，您需要自己尝试一下。可悲的是，Qt 的 Palette 文档再次没有任何关于边框颜色的通知。也许，它只是完全丢失了。

如何在Qt5中更改TableView标题的颜色（背景，文本）？

2 个答案: