将鼠标悬停在 tableView 列的标题上

Question

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

我想要的是我需要将鼠标悬停在 TableView 标题（列名）上。我检查了一遍，没有找到任何简单的解决我的问题的方法。

我尝试在TableVIewColumn 中使用工具提示，但它从未出现，而且我发现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 属性：

在标题委托中，您可以访问以下特殊的 属性：

• styleData.value - 此项的值或文本
• styleData.column - 列的索引
• styleData.pressed - 当列为真时 被按下
• styleData.containsMouse - 当列在下面时为真 鼠标
• styleData.textAlignment - 文本的水平对齐方式 列（从 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
    }
}