Qt6中如何捕获QML GridView项外部点击事件以取消选中？

在Qt6中，原Qt5通过设置z: -1的内部MouseArea来捕获外部点击的方法失效，原因是Qt6调整了GridView的内部层级，该MouseArea会被承载delegate的contentItem遮挡，无法接收点击事件。以下是两种可行的解决方案：

方案一：在父容器添加全局MouseArea判断点击目标 #

将MouseArea放在ApplicationWindow层级，通过判断点击目标是否为GridView的delegate来决定是否取消选中：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
id: root
width: 640
height: 480
visible: true
title: qsTr("Hello World")

ListModel {
    id: listModel
     ListElement {
         name: "Jim Williams"
     }
     ListElement {
         name: "John Brown"
     }
     ListElement {
         name: "Bill Smyth"
     }
     ListElement {
         name: "Sam Wise"
     }
 }

// 全局MouseArea，判断点击目标是否为delegate
MouseArea {
    anchors.fill: parent
    propagateComposedEvents: true
    onClicked: {
        let isDelegate = false;
        let target = mouse.target;
        // 向上遍历父元素，判断是否为GridView的delegate
        while (target) {
            if (target.GridView && target.GridView.isCurrentItem !== undefined) {
                isDelegate = true;
                break;
            }
            target = target.parent;
        }
        if (!isDelegate) {
            console.log("out clicked!")
            gridView.currentIndex = -1;
        }
    }
}

GridView {
    id: gridView
    anchors.fill: parent
    cellWidth: 80
    cellHeight: 80
    model: listModel

     delegate: Item {
         id: wrapper
         width: gridView.cellWidth
         height: gridView.cellHeight

         Rectangle {
             anchors.fill: parent
             anchors.margins: 4
             color: wrapper.GridView.isCurrentItem ? "#009688" :"#3d3d3d"

             Text {
                 anchors.fill: parent
                 color: "white"
                 text: name
             }
         }

         MouseArea {
             anchors.fill: parent
             onClicked: {
                gridView.currentIndex = index
             }
         }
       }
   }
 }

方案二：在GridView内部添加层级低于contentItem的MouseArea #

直接在GridView内部添加一个覆盖整个区域的容器，将其z值设为比contentItem低，确保它能捕获空白区域的点击：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
id: root
width: 640
height: 480
visible: true
title: qsTr("Hello World")

ListModel {
    id: listModel
     ListElement {
         name: "Jim Williams"
     }
     ListElement {
         name: "John Brown"
     }
     ListElement {
         name: "Bill Smyth"
     }
     ListElement {
         name: "Sam Wise"
     }
 }

GridView {
    id: gridView
    anchors.fill: parent
    cellWidth: 80
    cellHeight: 80
    model: listModel

    // 添加层级低于contentItem的MouseArea
    Item {
        anchors.fill: parent
        z: gridView.contentItem.z - 1
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("out clicked!")
                gridView.currentIndex = -1;
            }
        }
    }

     delegate: Item {
         id: wrapper
         width: gridView.cellWidth
         height: gridView.cellHeight

         Rectangle {
             anchors.fill: parent
             anchors.margins: 4
             color: wrapper.GridView.isCurrentItem ? "#009688" :"#3d3d3d"

             Text {
                 anchors.fill: parent
                 color: "white"
                 text: name
             }
         }

         MouseArea {
             anchors.fill: parent
             onClicked: {
                gridView.currentIndex = index
             }
         }
       }
   }
 }

两种方案都能实现点击GridView项外部时取消当前选中状态，方案二更贴近原Qt5的实现逻辑，方案一的全局判断则更灵活，适合复杂场景。

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