将鼠标悬停在 tableView 列的 header 上

Question

我有一个简单的 TableView 和 4 TableViewColumns，我通常不使用 qml，所以我不太确定如何在这段代码中正常工作。

我想要的是我需要一个mouse-over TableView headers（列名）。我检查了所有地方，但没有找到任何可以解决我的问题的简单方法。

我曾尝试在 TableVIewColumn 中使用 tool-tip，但它从未出现，而且我发现 TableViewColumn 中不支持鼠标区域。也许解决方案很简单，但我不知道那一刻。

Rectangle {
    width: parent.width
    height: parent.height

    TableView {
        id: table
        width: parent.width
        height: parent.height
        headerVisible: true

        TableViewColumn {
            id: time
            role: "t-stamp"
            title: "Time"
            width: 60
        }
        TableViewColumn {
            id: d
            role: "id"
            title: "SignId"
            width: 40
        }
        TableViewColumn {
            id: sid
            role: "s-id"
            title: "StratId"
            width: 50
        }
        TableViewColumn {
            id: stratname
            role: "strat_name"
            title: "StratName"
            width: 200
        }

        Connections{
            target: MessageTabelModel
            onUpdateView:{
                  table.resizeColumnsToContents()
            }
        }
        model: MessageTabelModel
    }
}

Answer 1

TableView 有一个 headerDelegate 属性包含鼠标信息：

In the header delegate you have access to the following special properties:

styleData.value - the value or text for this item

styleData.column - the index of the column

styleData.pressed - true when the column is being pressed

styleData.containsMouse - true when the column is under the mouse

styleData.textAlignment - the horizontal text alignment of the column (since QtQuickControls 1.1)

因此您可以根据需要使用 styleData.containsMouse，例如使用简单的基本文本：

headerDelegate: Text {
    color: styleData.containsMouse ? "red" : "black"
    text: styleData.value
    // ...
}

或者如果您想要更多定制：

headerDelegate: Rectangle {
    height: 20
    implicitWidth: headerText.paintedWidth
    border.color: "black"
    // ...

    Text {
        id: headerText
        color: styleData.containsMouse ? "red" : "black"
        text: styleData.value
        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
}

将鼠标悬停在 tableView 列的 header 上

Hover over header of a tableView columns

hover

qml

highlight

mouseover