QML中MouseArea元素的介绍

原文:http://www.thisisqt.com/?action-viewnews-itemid-22

MouseArea元素的一个很典型的用法是和一个可视的item一起用,处理这个item的鼠标响应。
在下例中我们将MouseArea放到Rectangle中,当单击Rectangle区域中时,Rectangle颜色会变成红色。
import Qt 4.7

Rectangle {
     width: 100; height: 100
     color: "green"

MouseArea {
         anchors.fill: parent
         onClicked: { parent.color = ‘red‘ }
     }
 }
很多时候,MouseArea区域会传递一个鼠标事件作为参数,这个参数中包含了很多鼠标事件信息,例如,
单击的位置,具体按下的一个鼠标左键还是右键,以及一些键盘按键信息。在下面的例子中,当Rectangle
区域被右键单击时会触发改变颜色。
Rectangle {
     width: 100; height: 100
     color: "green"

MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
             if (mouse.button == Qt.RightButton)
                 parent.color = ‘blue‘;
             else
                 parent.color = ‘red‘;
         }
     }
 }
对于其他键盘按键的处理,请参考Keys元素的介绍。
MouseArea是一个可见的item,但它本身并不显示什么。

属性
acceptedButtons : Qt::MouseButtons
表示MouseArea响应的鼠标按键。可取的值有以下三个:
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
默认值是Qt.LeftButton。acceptButtons属性还可以接受以上三个值的或组合形式,如下例所示:
MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton }

containsMouse : bool 只读
containsMouse属性用来表明当前的鼠标是否在MouseArea中。
注意如果当前鼠标时MouseArea中,此时如果移动MouseArea,这个属性不会自动更新,也就是说
containsMouse属性值不会改变。另外如果hoverEnabled为假,只有当鼠标被单击时containsMouse
才是正确的。

drag.target : Item
read-onlydrag.active : bool
drag.axis : enumeration
drag.minimumX : real
drag.maximumX : real
drag.minimumY : real
drag.maximumY : real
drag.filterChildren : bool
drag属性集让item拖动变得很方便。其中drag.target用来指明可以拖动的目标item的id,
drag.active表明目标item当前是否正在被拖动。drag.axis用来说明是否可以水平拖动(Drag.XAxis)
或是垂直拖动(Drag.XAxis)或是两者(Drag.XandYAxis)都允许。drag.minimum和drag.maximum用来
指明可以拖动的最小和最大距离。下面的例子中,Rectangle可以沿着x轴拖动。当拖动到右边的时候
Rectangle的透明度会降低。
Rectangle {
     id: container
     width: 600; height: 200

Rectangle {
         id: rect
         width: 50; height: 50
         color: "red"
         opacity: (600.0 - rect.x) / 600

MouseArea {
             anchors.fill: parent
             drag.target: rect
             drag.axis: Drag.XAxis
             drag.minimumX: 0
             drag.maximumX: container.width - rect.width
         }
     }
 }

enabled : bool
enabled属性表示item是否接受鼠标事件。默认为真,即接受鼠标事件。

hoverEnabled : bool
hoverEnabled属性表明是否处理鼠标悬停事件。
默认情况下,只处理鼠标的按键事件。如果hoverEnabled属性为真则所有的鼠标事件都会被处理,
即使鼠标没有被按下。这个属性影响containMouse属性,onEntered,onExited以及onPositionChanged信号。

mouseX : real 只读属性
mouseY : real 只读属性
mouseX和mouseY属性是当前鼠标的位置。如果hoverEnabled属性为假则只有当鼠标按下时,mouseX和mouseY属性
才有效。如果hoverEnabled属性为真,则mouseX和mouseY只在下面两种情况下才有效:
1.    没有鼠标按下,但鼠标在MouseArea(containsMouse为真)。
2.    鼠标按下并按住,即使鼠标已经移动到MouseArea之外。
mouseX和mouseY是相对于MouseArea的坐标。

pressed : bool 只读
pressed属性表明当前MouseArea是否按下。

pressedButtons : MouseButtons 只读
顾名思义,pressedButtons表示当前按下的鼠标是哪个键,具体取值如下:
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
下面的例子中,当单击鼠标右键时会显示字符“right”。
Text {
     text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

MouseArea {
         id: mouseArea
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
     }
 }

信号
MouseArea::onCanceled ()
当鼠标事件没有被接受或是被其他元素截获时,MouseArea::onCanceled()会被调用。当有多个MouseArea处理输入时
或是Flickable元素中包含一个MouseArea时,MouseArea::onCanceled()会显得特别重要。如果在Flickable元素中包
含一个MouseArea时,当执行一些针对于按下信号的逻辑处理然后又拖动鼠标时,Flickable会从MouseArea中截获鼠标
事件。在这种情况下,当Flickable截获了MouseArea的鼠标事件时需要重置逻辑。

MouseArea::onClicked ( MouseEvent mouse )
当有单击事件(在MouseArea中按下紧接着弹起)发生时,MouseArea::onClicked方法会被调用。

MouseArea::onDoubleClicked ( MouseEvent mouse )
当有双击事件(按下紧接着弹起然后再按下)发生时调用。在MouseArea::onDoubleClicked中如果将accepted属性设置
为假,则在第二次单击时onPressed、onReleased、onClicked仍会被调用,否则在第二次单击时onPressed、onReleased、
onClicked不会被调用。

MouseArea::onEntered ()
当鼠标进入MouseArea中时,MouseArea::onEntered()会被调用。默认情况下,只有当鼠标在MouseArea中单击时才会调用,
可如果将hoverEnabled设置为真,当鼠标拖动至MouseArea时也会调用onEntered();

MouseArea::onExited ()
当鼠标离开MouseArea中时,MouseArea:: onExited ()会被调用。默认情况下,只有当鼠标在MouseArea中单击时才会调用,
可如果将hoverEnabled设置为真,当鼠标拖动至MouseArea时也会调用onExited ();

MouseArea::onPositionChanged ( MouseEvent mouse )
当鼠标位置发生改变时会调用onPositionChanged,在这个方法中不会考虑MouseEvent参数的accepted属性,也就是说所有的
鼠标事件在这里都会被处理,并不会因为某个鼠标事件被拒绝了而不做处理。默认情况下,只有在鼠标按下时才会调用onPositionChanged。
不过如果将hoverEnabled设置为真,当鼠标移动时onPositionChanged也会被调用。

MouseArea::onPressed ( MouseEvent mouse )
当有鼠标按下时onPressed会被调用。MouseEvent类型的参数提供有关按下时的鼠标信息,包括鼠标的位置以及按下时对应的鼠标按键。
参数mouse的accepted属性决定了MouseArea是否要处理这个鼠标事件。如果mouse的accept属性被设置为假则直到下一个按下事件发生,
这这间任何鼠标事件都不会发送给MouseArea。

MouseArea::onReleased ( MouseEvent mouse )
当有鼠标弹起时会调用onReleased。MouseEvent类型的参数提供有关按下时的鼠标信息,包括鼠标的位置以及按下时对应的鼠标按键。

参数mouse的accepted属性会被忽略不做处理。

时间: 2024-10-16 02:34:55

QML中MouseArea元素的介绍的相关文章

qt qml中PropertyAnimation的几种使用方法

qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移动到一个特定的位置 2,动画仅仅有在某一个特定的外部行为触发时候才会被触发,比如,鼠标单击某一个控件时候,产生动画.使目标移动到指定的位置 3,仅仅有在某一个特定的信号后才触发 4,做为一个独立的动画,尽管没有绑定rectangle的运动,可是能够在脚本中载入,開始和停止 5.仅仅有在状态改变时候才

QML中的模型/视图 十二

QML中对于数据的存储和显示使用模型/视图框架. 1. QML数据模型 视图项目(如ListView.GridView和Repeater等)需要使用数据模型来为其提供数据进行显示.这些项目通常也需要一个委托(delegate)组件来为模型中的每一个条目创建一个实例.模型可以是静态的,也可以进行动态的修改.插入.移除或者移动项目.Qt帮助参考QML Data Models关键字. Item{ width:200; height:250 ListModel{ id:myModel ListEleme

如何在QML中使用ListView并导航到其它页面中

我们知道ListView在QML应用中扮演非常重要的角色.看看我们的很多的应用都是在使用ListView.那么当我们点击ListView中的item并导航到另外一个页面呢?其实这样的方法有很多.在这篇文章中,我们来介绍其中的几种.开发者可以参照其中的设计,或自己想出更好的设计. 1)使用PageStack来完成 在我们的RssReader中的例子中,我们使用了PageStack来完成我们的导航.我们可以把我们的每个页面都做成我们的Page.当我们的页面被点击后,我们把新的Page压入栈中.在返回

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2

Python中list的功能介绍

List的功能介绍 1. 列表的两种方法 1. 列表的内置方法 列表的相加 格式:x.__add__(y)等同于x+y 例如:list1 = [1,2,3] print(list1.__add__([4,5,6])) >>> [1,2,3,4,5,6] 返回值:list 注:上述的y可以是list/tuple/str/dict/set等,但不可以是int. 是否是包含关系 格式:x.__contains__(y)等同于y in x 例如:list1 = [1,2,3] print(lis

3.2 表单元素逐一介绍

下面讨论表单元素的类型及常用的属性. 本节单词记忆:标签 1.select 2.option 3.textarea 属性 1.text 2.password 3.radio 4.checkbox 5.name 6.value 7.reset 8.submit 9.button 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的. 1.文本框 在表单中最常用最常见的表单输入元素就是文本框(text)

JavaScript 的in 操作符 (“如何判断某值是否数组中的元素”?)

在编写JavaScript时,遇到一个常见的问题"如何判断某值是否数组中的元素"?这让我想起了PHP中的in_array()函数和Python中in 操作符.但JavaScript似乎没有内置类似的函数,而其in 操作符的作用也有点不同.通过查询相关的资料,我发现JavaScript的in 操作符还是挺有用的. 一.问题让我想到in 操作符,正是因为这样一个问题:"如何判断某值是否数组中的元素"?在PHP中,您可能会这样来处理: $os = array("