qml模态弹窗过滤鼠标移动事件

最新推荐文章于 2024-07-29 15:51:30 发布

DKMKVI

最新推荐文章于 2024-07-29 15:51:30 发布

阅读量889

点赞数 1

分类专栏： qt/qml遇到的那些坑文章标签： qml qt

本文链接：https://blog.csdn.net/qq_42551817/article/details/122298212

版权

qt/qml遇到的那些坑专栏收录该内容

5 篇文章 0 订阅

订阅专栏

博客介绍了在使用Qt QML的Popup组件时遇到的问题，即设置modal属性为true后，虽然阻止了点击事件，但鼠标移动事件仍然能触发被遮挡的MouseArea。为了解决这个问题，提出了使用Overlay附加类型的modal属性，通过添加一个透明的矩形和设置preventStealing为true来阻止鼠标事件传递，从而实现完全屏蔽鼠标事件的效果。

摘要由CSDN通过智能技术生成

问题描述：在使用qml中的popup组件时，将modal属性设置成true，即模态弹窗，popup窗口之外区域的鼠标点击事件被禁用，但是鼠标移动事件仍然被响应，即被弹窗掩盖的id为ma1的MouseArea的onEntered和onExited事件仍然会触发。

代码示例：

Item{
    width: 100
    height: 100
    MouseArea{
        id: ma1
        hoverEnabled: true
        anchors.fill: parent
        onEntered:{
            console.log("鼠标移入")
        }
        onExited:{
            console.log("鼠标移出")
        }
        onClicked:{
            if(testPopup.opened){
                testPopup.open()
            }else{
                console.log("自动关闭弹窗")
                testPopup.close()
            }
        }
    }
    
    Popup {
        id: testPopup
        modal: true
        contentWidth: 30
        contentHeight: 30
        contentItem: Rectangle{
            anchors.fill: parent.contentItem
            MouseArea{
                id: ma2
                anchors.fill: parent
                onClicked:{
                    console.log("手动关闭弹窗")
                    testPopup..close()
                }
            }
        }
    }
}

解决方案：通过使用Overlay附加类型控制模态弹窗的遮蔽区域（也能设置非模态弹窗的遮蔽区域或者弹窗位置等属性，具体可以去官方文档中查看），本文中用的是模态弹窗，因此使用的是附加类型Overlay的modal属性，具体代码如下：

Item{
    width: 100
    height: 100
    MouseArea{
        id: ma1
        hoverEnabled: true
        anchors.fill: parent
        onEntered:{
            console.log("鼠标移入")
        }
        onExited:{
            console.log("鼠标移出")
        }
        onClicked:{
            if(testPopup.opened){
                testPopup.open()
            }else{
                console.log("自动关闭弹窗")
                testPopup.close()
            }
        }
    }
    
    Popup {
        id: testPopup
        modal: true
        contentWidth: 30
        contentHeight: 30
        contentItem: Rectangle{
            anchors.fill: parent.contentItem
            MouseArea{
                id: ma2
                anchors.fill: parent
                onClicked:{
                    console.log("手动关闭弹窗")
                    testPopup..close()
                }
            }
        }
        Overlay.modal: Rectangle{//设置模态弹窗遮蔽颜色
             color: "transparent"
             MouseArea{
                 preventStealing: true
             }
        }
    }
}

上述代码中，modal后的矩形组件用于设置遮蔽颜色及鼠标区域，鼠标区域中的preventStealing属性的作用在文档中直译为 “此属性用于控制该鼠标区域的鼠标事件是否被窃取”，这里设置为true实现了我想要的效果：防止任何鼠标事件被其他鼠标区域获取。