Qml学习——鼠标事件处理MouseArea

最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章：
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件

---

1 MouseArea

MouseArea是一个处理鼠标事件的项目，它和可见项目是结合使用的。
如以下例程。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true; width: 200; height: 120

    Rectangle {
        width: 30; height: 30; color: 'red'
        MouseArea {
            anchors.fill: parent
            onClicked: console.log('red rect')
        }
    }
    Rectangle {
        width: 30; height: 30; color: 'yellow'
        anchors.right: parent.right
        MouseArea {
            anchors.fill: parent
            onClicked: console.log('yellow rect')
        }
    }
}

可以捕捉并处理范围内的鼠标事件。

1.1 拖动控件

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true; width: 200; height: 120
    Text {
        text: 'text'
        MouseArea {
            anchors.fill: parent
            drag.target: parent
        }
    }
}

1.2 鼠标事件过滤问题

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true; width: 200; height: 120

    Rectangle {
        anchors.fill: parent
        MouseArea {
            anchors.fill: parent
            onClicked: console.log('rectangle')
        }

        Text {
            anchors.centerIn: parent
            text: "text"
            MouseArea {
                anchors.fill: parent
                onClicked: console.log('text')
            }
        }
    }
}

点击Text时，事件只被触发了一次，原因是Text处理事件时，默认把事件过滤掉了，导致Rectangle无法接收事件，想要让事件不被过滤，可以把代码改成如下所示。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true; width: 200; height: 120

    Rectangle {
        anchors.fill: parent
        MouseArea {
            anchors.fill: parent
            onClicked: console.log('rectangle')
        }

        Text {
            anchors.centerIn: parent
            text: "text"
            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true
                onClicked: {
                    console.log('text')
                    mouse.accepted = false;
                }
            }
        }
    }
}