TableView重叠时鼠标事件异常问题：原因及解决方法

问题原因分析 #

1. 顶部空白区域事件传递到底部的原因 #

QML鼠标事件会穿透无可视化元素或未处理事件的区域。顶部TableView右侧空白区域未生成delegate，且该区域没有任何拦截事件的元素，因此鼠标事件会向下穿透，传递到下方的bottomScope内的TableView，触发其事件逻辑。

2. 两个MouseArea注释取消后的现象原因 #

• captureMouseAreaFront：该MouseArea在TableView的上方（代码顺序靠后，z轴层级更高），完全覆盖topScope。点击委托时，事件先被顶层的MouseArea捕获，委托内部的MouseArea无法接收事件，导致委托不可点击。
• captureMouseAreaBack：该MouseArea在TableView的下方（代码顺序靠前），TableView层级更高。空白区域的事件先经过TableView，因TableView未拦截，直接穿透到下方的bottomScope，不会被底层的captureMouseAreaBack接收，因此无效果。

解决方案 #

利用TableView的background属性，给空白区域添加事件拦截，同时不影响委托点击：

修改顶部FocusScope代码如下：

FocusScope {
    id: topScope
    anchors.centerIn: parent
    width: 400; height: 150

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        clip: true
        model: model

        // 用background替代原独立Rectangle，同时添加MouseArea拦截空白区域事件
        background: Rectangle {
            color: "#ddffff"
            opacity: 0.7
            MouseArea {
                anchors.fill: parent
                onClicked: topScope.forceActiveFocus()
            }
        }

        delegate: Rectangle {
            implicitWidth: 100; implicitHeight: 50
            color: topScope.activeFocus ? "blue" : "white"

            Text { text: display; anchors.centerIn: parent }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("on top Delegate clicked")
                    topScope.forceActiveFocus()
                }
            }
        }
    }
}

原理说明 #

• TableView的background位于所有delegate下方，点击delegate时，事件会被委托内部的MouseArea优先处理，不会传递到background的MouseArea。
• 点击空白区域时，无delegate拦截事件，事件被background的MouseArea捕获，触发焦点切换，同时阻止事件向下穿透到bottomScope。

内容的提问来源于stack exchange，提问作者avb