利用InverseMouseArea捕捉在有效区域以外的鼠标事情

来源：互联网发布：js 声明json 编辑：程序博客网时间：2024/06/01 08:32

在有些设计中，比如，我们想在鼠标所在的区域以外响应我们的鼠标按钮事件来消除一个popup，那么我们可以利用Ubuntu SDK中所提供的InverseMouseArea来实现这个功能．

下面我们来通过一个例子来展示如何利用InverseMouseArea来实现这个功能．

首先，我们来创建一个Popup.qml文件

Popup.qml

import QtQuick 2.4import Ubuntu.Components 1.3Rectangle {    anchors.centerIn: parent    width: parent.width/2    height: width    color: "darkgray"    radius: 10    InverseMouseArea {       anchors.fill: parent       acceptedButtons: Qt.LeftButton       onPressed: parent.destroy()    }}

在上面的Popup定义了一个InverseMouseArea．当我们在这个Popup以外的地方进行点击的时候，那么它将自动销毁．

Main.qml

import QtQuick 2.4import Ubuntu.Components 1.3/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "inversemouse.liu-xiao-guo"    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("inversemouse")        Rectangle {            width: parent.width            height: parent.height/2            border.color: "red"            Button {                id: button                text: "Press me"                onClicked: {                    var component = Qt.createComponent("Popup.qml");                    var obj = component.createObject(parent);                    obj.visible = true;                }            }        }    }}

在我们的Main.qml中，我们利用一个按钮＂Press me＂．当它被点击的时候，动态地生产一个Popup的控件．当我们在控件上点鼠标时，没有任何事情发生，但是如果，我们在它之外的任何一个地方点击的时候，那么这个Popup就会被销毁．

运行我们的应用：

当然如果我们想在我们的Popup中得到鼠标的按钮信息的话，我们也可以在我们的Popup中加入MouseArea来进行捕获．

Popup.qml

import QtQuick 2.4import Ubuntu.Components 1.3Rectangle {    anchors.centerIn: parent    width: parent.width/2    height: width    color: "darkgray"    radius: 10    MouseArea {        anchors.fill: parent        onClicked: {            console.log("it is clicked inside popup")        }    }    InverseMouseArea {       anchors.fill: parent       acceptedButtons: Qt.LeftButton       onPressed: parent.destroy()    }}

整个项目的代码在：https://github.com/liu-xiao-guo/inversemouse

另外如果我们想对鼠标的点击区域进行限制的话，我们可以通过利用：

sensingArea : Item

来做限制，比如下面的代码：

Main.qml

import QtQuick 2.4import Ubuntu.Components 1.3MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "inversemouse1.liu-xiao-guo"    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("inversemouse1")        Rectangle {            width: units.gu(40)            height: units.gu(71)            border.color: "yellow"            border.width: units.gu(1)            MouseArea {                anchors.fill: parent                onClicked: console.log("clicked on the root component")            }            Rectangle {                id: blueRect                width: units.gu(30)                height: units.gu(51)                anchors.centerIn: parent                color: "blue"                Rectangle {                    width: units.gu(20)                    height: units.gu(20)                    anchors.centerIn: parent                    color: "red"                    InverseMouseArea {                        anchors.fill: parent                        sensingArea: blueRect                        onClicked: console.log("clicked on the blue rect")                    }                }            }        }    }}

在上面的代码中，我们通过blueRect来限制InverseMouseArea的作用范围．也就是在蓝色和红色直接的范围才会显示：

qml: clicked on the blue rect

而在其它的任何地方点击时都会显示：

qml: clicked on the root component

我们的应用的显示如下：

整个项目的源码在：https://github.com/liu-xiao-guo/inversemouse1

更多关于这个API的阅读，请参阅连接InverseMouseArea．

0 0