如何正确处理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:

按下(MouseEvent鼠标)

pressed(MouseEvent mouse)

处理此信号时，请使用mouse参数的accepted属性来控制此MouseArea是否处理按下以及所有将来的鼠标事件，直到释放为止.默认值为接受事件，并且不允许该事件下的其他MouseArea处理事件. 如果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.

推荐答案

如果仅是要实现的选择，则可以手动设置选择:

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屋！