Qml 工作记录：MouseArea区域重叠，鼠标穿透示例

最新推荐文章于 2024-03-20 02:07:32 发布

原创最新推荐文章于 2024-03-20 02:07:32 发布 · 581 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#qml

工作记录专栏收录该内容

17 篇文章

订阅专栏

这篇博客探讨了QtQuick中使用MouseArea组件处理鼠标点击事件的情况，特别是关于鼠标穿透(propagateComposedEvents)和事件阻止(mouse.accepted=false)的实践。通过示例展示了如何在红色和蓝色矩形中设置鼠标区域，并控制事件的传递，以便在矩形重叠时实现特定的交互行为。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick 2.13
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.3

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: btn
        anchors.fill: parent
        color: 'red'

        // 鼠标区域
        MouseArea {
            anchors.fill: parent          
            onClicked: {
                console.log('red')
            }
        }

        Rectangle {
            width: parent.width / 2
            height: parent.height / 2
            color: 'blue'

            // 鼠标区域与上面的父元素鼠标区域重叠
            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true           // 鼠标穿透
                onClicked: {
                    mouse.accepted = false          // 传递到下面的父元素
                    console.log('blue')
                }

            }
        }

    }



}