如何正确处理具有重叠鼠标区域的 QML TableView 中的鼠标事件? [英] How do I correctly handle mouse events in a QML TableView with overlapping mouse areas?

问题描述

我的TableViewColumn 附加了一个委托，其中包含一个MouseArea.我使用 MouseArea 来检测对表格中单个单元格的双击，这允许我显示 TextField 以进行编辑.

I've got a delegate attached to my TableViewColumn that contains a MouseArea. I use the MouseArea to detect double clicks on individual cells in the table, which allows me to show a TextField for editing purposes.

问题是委托 MouseArea 阻止鼠标事件传播到 TableView.这意味着 TableView 的选择行为不再起作用.具体来说，我启用了 SelectionMode.ExtendedSelection.

The problem is the delegate MouseArea blocks mouse events from propagating through to TableView. This means that the selection behaviour of TableView no longer works. Specifically, I have SelectionMode.ExtendedSelection enabled.

MouseArea 子项很简单，最初看起来像这样:

The MouseArea child item is simple and originally looked like this:

MouseArea{
    id: mousearea
    anchors.fill: parent
    onDoubleClicked: {
        showTextField()
    }
}

在查阅文档后，看起来应该这样:

After consulting the documentation, it looked like this should work:

MouseArea{
    id: mousearea
    anchors.fill: parent
    propagateComposedEvents: true        // new
    onDoubleClicked: {
        showTextField()
    }
    onPressed: mouse.accepted = false    // new
}

确实如此，但现在我不能再接收双击事件了(在 MouseArea 中)！这是有道理的，正如文档后面所述:

Which it does, except now I cannot pick up double click events anymore (in MouseArea)! Which makes sense, as it states later in the documentation:

按下(鼠标事件鼠标)

处理此信号时，使用鼠标参数的接受属性来控制此 MouseArea 是否处理按下和所有未来的鼠标事件，直到释放.默认是接受该事件，并且不允许该事件下方的其他 MouseAreas 处理该事件.如果accepted 设置为false，则在下次按下按钮之前不会再向此MouseArea 发送任何事件.

When handling this signal, use the accepted property of the mouse parameter to control whether this MouseArea handles the press and all future mouse events until release. The default is to accept the event and not allow other MouseAreas beneath this one to handle the event. If accepted is set to false, no further events will be sent to this MouseArea until the button is next pressed.

似乎没有办法在 TableView 级别捕获单个单元格的鼠标事件.这是我玩 QML 的第一天，所以我可能在这里错过了一些明显的东西，但是我有什么选择呢?注意我使用的是 PyQt.

There does not seem to be a way to capture mouse events for individual cells at the TableView level. It's my first day playing around with QML, so I might have missed something obvious here, but what are my options? Note I'm using PyQt.

推荐答案

如果只是你想要的selection，你可以手动设置selection:

If it is only the the selection you want to achive you can set the selection manually:

TableView {
    id: tv
    itemDelegate: Item {
        Text {
            anchors.centerIn: parent
            color: styleData.textColor
            elide: styleData.elideMode
            text: styleData.value
        }
        MouseArea {
            id: ma
            anchors.fill: parent
            onPressed: {
                tv.currentRow = styleData.row
                tv.selection.select(styleData.row) // <-- select here.
            }
            onClicked: {
                console.log(styleData.value)
            }
        }
    }

    TableViewColumn {
        role: 'c1'
        title: 'hey'
        width: 100
    }
    TableViewColumn {
        role: 'c2'
        title: 'tschau'
        width: 100
    }
    model: lm
}

现在我只选择.但是您可以编写自己的选择/取消选择-逻辑.

Right now I only select. But you can write your very own selection/deselection-logic.

您还可以从 TableView.__mouseArea 映射到委托.

You might also map from the TableView.__mouseArea to the delegate.

import QtQuick 2.7
import QtQuick.Controls 1.4

ApplicationWindow {
    id: appWindow
    width: 1024
    height: 800
    visible: true

    ListModel {
        id: lm
        ListElement { c1: 'hallo1'; c2: 'bye' }
        ListElement { c1: 'hallo2'; c2: 'bye' }
        ListElement { c1: 'hallo3'; c2: 'bye' }
        ListElement { c1: 'hallo4'; c2: 'bye' }
        ListElement { c1: 'hallo5'; c2: 'bye' }
        ListElement { c1: 'hallo6'; c2: 'bye' }
        ListElement { c1: 'hallo7'; c2: 'bye' }
        ListElement { c1: 'hallo8'; c2: 'bye' }
        ListElement { c1: 'hallo9'; c2: 'bye' }
    }

    TableView {
        id: tv
        itemDelegate: Item {
            id: mydelegate
            signal doubleclicked()
            onDoubleclicked: console.log(styleData.value)
            Text {
                anchors.centerIn: parent
                color: styleData.textColor
                elide: styleData.elideMode
                text: styleData.value
            }

            Connections {
                target: tv.__mouseArea
                onDoubleClicked: {
                    // Map to the clickposition to the delegate
                    var pos = mydelegate.mapFromItem(tv.__mouseArea, mouse.x, mouse.y)
                    // Check whether the click was within the delegate
                    if (mydelegate.contains(pos)) mydelegate.doubleclicked()
                }
            }
        }

        TableViewColumn {
            role: 'c1'
            title: 'hey'
            width: 100
        }
        TableViewColumn {
            role: 'c2'
            title: 'tschau'
            width: 100
        }
        model: lm
    }
}

这篇关于如何正确处理具有重叠鼠标区域的 QML TableView 中的鼠标事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！