qml MouseArea鼠标穿透问题

原文地址::https://blog.csdn.net/lsylovezsl/article/details/90030607

相关文章

1、QML MouseArea 嵌套鼠标点击事件失效问题----https://blog.csdn.net/weixin_42408598/article/details/103263251?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

2、QML鼠标事件传递（鼠标穿透）----https://gongjianbo1992.blog.csdn.net/article/details/103121853?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control

3、QML实战：MouseArea的鼠标事件穿透----https://blog.csdn.net/Gulstin/article/details/106935992?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control

4、

 

先来看一段代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
Window {
 
    visible: true
    width: 640
    height: 480
 
    title: qsTr("Hello World")
 
    color: "red"
 
 
 
    Button {
        anchors.centerIn: parent;
        width: 20
        height: 20;
        id:btnFullOrSmaller
        property bool flag: false;
        tooltip: "全屏"
 
        style:ButtonStyle {
            background: Rectangle {
                color: "transparent"
            }
        }
 
        Image {
            id: btnImage;
            width: 20
            height: 20;
 
            source: "qrc:/images/fullscreen.png"
        }
 
        /*DropShadow {
            visible:true;
            anchors.fill: parent;
            horizontalOffset: 0;
            verticalOffset: 0;
            radius: 6;
            samples: 2;
            color: "blue";
            source: parent;
            spread: 6;
        }*/
 
 
        onClicked: {
            console.log("fullscreen clicked",flag);
 
            flag = !flag;
 
            if(flag){
 
                btnImage.source = "qrc:/images/fullscreen_exit.png"
 
            } else {
 
                btnImage.source = "qrc:/images/fullscreen.png"
 
            }
 
        }
 
    }//END Button
 
 
 
 
    MouseArea {
        anchors.fill: parent;
        enabled: true;
 
        onEntered: {
            console.log("onEnte")
        }
 
        onClicked: {
            console.log("clicked");
        }
 
        onExited: {
            console.log("onExite")
        }
    }
 
}
运行结果：

不管点击父窗体还是Button本身，都打印clicked，这显然不是我们想要的结果。

我们的想要的效果是点击父窗体时打印

qml:clicked

点击button时打印

qml:fullscreen clicked

现在有两种方法可以解决：

1）.把MouserArea放在最前面

2）.给Button设置z序如：

最后的运行结果：

欢迎各位同学提出更好的方案，大家相互沟通学习。
————————————————
版权声明：本文为CSDN博主「刘一儿」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lsylovezsl/article/details/90030607