0%

MouseArea属性说明

发表于 分类于 ，
本文字数： 8.8k 阅读时长 ≈ 8 分钟

继承自 Item

MouseArea是为了该项目提供鼠标操作结合通常与一个可见项一种无形的项目。通过有效地充当代理，用于鼠标处理的逻辑可以包含在MouseArea项目中。

本文: https://www.lovejia.win/blog/article/MouseArea.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-mousearea.html
参考译文：http://blog.csdn.net/ubuntukylin/article/details/9191917

属性说明

acceptedButtons : Qt::MouseButtons

此属性保存鼠标区域响应的鼠标按钮。
可取的值有以下三个：
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
默认值是Qt.LeftButton。acceptButtons属性还可以接受以上三个值的或组合形式。

containsMouse : bool

此属性保存鼠标当前是否在鼠标区域内。
注意：如果当前鼠标在MouseArea中，此时如果移动MouseArea，这个属性不会自动更新，也就是说containsMouse属性值不会改变。另外如果hoverEnabled为false，只有当鼠标被单击时containsMouse才有效。

containsPress : bool

这是一个等同的便利属性pressed && containsMouse，即，它是否保持当前是否按下了acceptedButton，并且鼠标当前在MouseArea中。
此属性对于在鼠标在其范围内按下时突出显示项目特别有用。

cursorShape : Qt::CursorShape

此属性保存此鼠标区域的光标形状。
注意：在不显示鼠标光标的平台上，这可能没有效果。
可用的光标形状为：
Qt.ArrowCursor - 箭头光标
Qt.UpArrowCursor - 上箭头光标
Qt.CrossCursor - 十字光标
Qt.WaitCursor - 沙漏光标
Qt.IBeamCursor - 工字梁光标
Qt.SizeVerCursor
Qt.SizeHorCursor
Qt.SizeBDiagCursor
Qt.SizeFDiagCursor
Qt.SizeAllCursor
Qt.BlankCursor - 空白光标
Qt.SplitVCursor - 分裂V光标
Qt.SplitHCursor - 分裂H光标
Qt.PointingHandCursor - 指向手光标
Qt.ForbiddenCursor - 禁止光标
Qt.WhatsThisCursor
Qt.BusyCursor
Qt.OpenHandCursor - 张开手光标
Qt.ClosedHandCursor - 封闭的手形光标
Qt.DragCopyCursor - 拖动复制光标
Qt.DragMoveCursor - 拖动光标移动
Qt.DragLinkCursor - 拉杆光标

drag

drag.target : Item
drag.active : bool
drag.axis : enumeration
drag.minimumX : real
drag.maximumX : real
drag.minimumY : real
drag.maximumY : real
drag.filterChildren : bool
drag.threshold : real

drag 提供了一种使项目可拖动的方便方法。
drag.target 指定要拖动的项目的ID。
drag.active 指定目标项目当前是否正在被拖动。
drag.axis指定是否可以水平（Drag.XAxis），垂直（Drag.YAxis）或两者（Drag.XAndYAxis）
drag.minimum并drag.maximum限制目标可以沿对应轴拖动多远。
注意：如果项目被锚定为所请求的项目，则无法将其拖动drag.axis。

enabled : bool

此属性表示item是否接受鼠标事件。
默认情况下，此属性为true，即接受鼠标事件。
注意：由于历史原因，此属性不等同于Item.enabled。它只影响鼠标事件，其效果不会传播到子项目。

hoverEnabled : bool

此属性用于处理是否悬停事件。
默认情况下，鼠标事件只响应按钮事件或按下按钮时处理。悬停可以处理所有鼠标事件，即使没有按下鼠标按钮。
此属性影响containsMouse属性和onEntered，onExited和onPositionChanged信号。

mouseX : real / mouseY : real

mouseX和mouseY属性是当前鼠标的位置。
如果hoverEnabled属性为false，那么这些属性将仅在按下按钮时有效，并且只要按住按钮即使鼠标移动到区域外也保持有效。
默认情况下，此属性为false。
如果hoverEnabled为true，那么以下属性将有效：
1.没有按钮被按下，但鼠标是在MouseArea（containsMouse是true）。
2.按钮被按下并保持，即使它已经移出MouseArea之外。
mouseX和mouseY是相对于MouseArea的坐标。

pressed : bool

这个属性表明当前MouseArea是否按下。

pressedButtons : MouseButtons

此属性保存当前按下的鼠标按钮。
它包含以下位元组合：
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
注意：此属性仅处理acceptedButtons中指定的按钮。

preventStealing : bool

此属性保存鼠标事件是否可能从此MouseArea被盗。默认情况下，此属性为false。
如果将鼠标区域放置在过滤儿童鼠标事件（例如Flickable）的项目内，则如果父项目识别出手势（例如轻拂手势），则鼠标事件可能从MouseArea被盗。如果preventStealing设置为true，则没有项目将窃取鼠标事件。
注意：一旦项目开始窃取事件，将preventStealing设置为true将在下一个按事件之前无效。

propagateComposedEvents : bool

此属性保持组合的鼠标事件是否将自动传播到与此MouseArea重叠但与可视堆叠顺序较低的其他MouseAreas 。默认情况下，此属性为false。
MouseArea包含几个组合事件：clicked，doubleClicked和pressAndHold。这些由基本的鼠标事件组成，像pressed，并且可以与基本事件不同地传播。
如果propagateComposedEvents设置为true，那么组合事件将自动传播到场景中相同位置的其他MouseAreas。每个事件都按照堆叠顺序传播到下一个启用的 MouseArea，并沿着此可视层次向下传播，直到MouseArea接受事件。与pressed事件不同，如果没有处理程序，则不会自动接受组合事件。

scrollGestureEnabled : bool

此属性控制此MouseArea是否响应来自非鼠标设备的滚动手势，例如触控板上的2手指轻弹手势。如果设置为false，则只有当车轮事件来自具有车轮的实际鼠标时才会发出车轮信号，而滚动手势事件将通过任何其他将处理它们的项目。例如，当光标位于包含一个项目的用户可能执行轻拂手势鼠标区域，打算用Flickable其下方相互作用。将此属性设置为false将允许PinchArea处理鼠标滚轮或捏合手势，而Flickable处理轻弹手势。
默认情况下，此属性为true。

信号说明

cancelled（）

当鼠标事件取消时，发出此信号，因为另一个项目偷走了鼠标事件处理。
此信号适用于高级用途：当有多个MouseArea处理输入时，或在Flickable中有MouseArea时，此信号非常有用。在后一种情况下，如果在执行一些逻辑onPressed信号处理函数，然后开始拖动时，Flickable将窃取鼠标从操作鼠标区域。在这些情况下，当MouseArea丢失鼠标处理到Flickable时，要重置逻辑，canceled应该除了释放之外处理。
相应的处理程序是onCanceled。

clicked（MouseEvent mouse）

当有点击时，发出此信号。点击被定义为按下，然后是释放，在MouseArea内部（按下，移动到MouseArea之外，然后向内移动，释放也被认为是点击）。
该鼠标的参数提供了有关点击信息，包括点击释放的X和Y位置，然后单击是否举行。
处理此信号时，更改鼠标参数的accepted属性没有任何效果。
相应的处理程序是onClicked。

doubleClicked（MouseEvent mouse）

当有双击时（按下，然后是释放，然后按下），发出此信号。该鼠标的参数提供了有关点击信息，包括点击释放的X和Y位置，然后单击是否举行。
当处理此信号时，如果将鼠标参数的accepted属性设置为false，则将发出按下/释放/点击的信号用于第二次点击; 否则它们被抑制。该属性默认为true。
相应的处理程序是onDoubleClicked。

entered（）

当鼠标进入鼠标区域时发出此信号。
默认情况下，只有当按下一个按钮时，才会发出此信号。将hoverEnabled设置为true，即使没有按下鼠标按钮也会发出此信号。
相应的处理程序是onEntered。

exited（）

当鼠标退出鼠标区域时发出此信号。
默认情况下，只有当按下一个按钮时，才会发出此信号。将hoverEnabled设置为true，即使没有按下鼠标按钮也会发出此信号。
相应的处理程序是onExited。

positionChanged（MouseEvent mouse）

当鼠标位置改变时发出此信号。
该鼠标的参数提供有关鼠标的信息，包括X和Y位置，目前按任何按钮。
默认情况下，只有当按下一个按钮时，才会发出此信号。将hoverEnabled设置为true，即使没有按下鼠标按钮也会发出此信号。
处理此信号时，更改鼠标参数的accepted属性没有任何效果。
相应的处理程序是onPositionChanged。

pressAndHold（MouseEvent mouse）

当有长按（当前为800ms）时，发出此信号。该鼠标的参数提供了有关的新闻，包括新闻界的x和y位置，并按下按钮。
处理此信号时，更改鼠标参数的accepted属性没有任何效果。
相应的处理程序是onPressAndHold。

pressed（MouseEvent mouse）

当有按下时，发出此信号。该鼠标的参数提供了有关的新闻信息，包括X和Y位置和哪个按钮被按下。
处理此信号时，请使用mouse参数的accepted属性来控制此MouseArea是否处理新闻稿和所有未来的鼠标事件，直到发布。默认是接受事件，并且不允许此下面的其他MouseAreas处理事件。如果accepted被设置为false，则在下一次按下按钮之前，不会向此MouseArea发送其他事件。
相应的处理程序是onPressed。

released（MouseEvent mouse）

当有释放时，发出此信号。该鼠标的参数提供了有关点击信息，包括点击释放的X和Y位置，然后单击是否举行。
处理此信号时，更改鼠标参数的accepted属性没有任何效果。
相应的处理程序是onReleased。

wheel（WheelEvent wheel）

该信号响应于鼠标滚轮和轨迹板滚动手势而发射。
该轮参数提供有关事件的信息，包括X和Y位置，目前按任何按钮，以及有关轮机芯，包括angleDelta和pixelDelta。
相应的处理程序是onWheel。

功能简述

MouseArea是为了该项目提供鼠标操作结合通常与一个可见项一种无形的项目。通过有效地充当代理，用于鼠标处理的逻辑可以包含在MouseArea项目中。
该启用属性用于启用和禁用鼠标操作的代理的项目。禁用时，鼠标区域对鼠标事件变得透明。
该压只读属性指示用户是否在鼠标区域按住鼠标按钮。此属性通常用于用户界面中的属性之间的绑定。该containsMouse只读属性表示将鼠标光标放在鼠标区域的存在，但是，在默认情况下，只有当鼠标按钮不放; 参阅containsMouse文档。
有关鼠标位置和按钮点击的信息通过为其定义事件处理程序属性的信号提供。最常用的涉及处理鼠标按下和点击：onClicked，onDoubleClicked，onPressed，onReleased和onPressAndHold。它也可以通过onWheel信号处理鼠标滚轮事件。
如果鼠标区域与其他的区域重叠鼠标区域的项目，你可以选择传播clicked，doubleClicked并pressAndHold通过设置事件对这些其他项目propagateComposedEvents为true，并拒绝应传播的事件。有关详细信息，请参阅propagateComposedEvents文档。
默认情况下，MouseArea项目只报告鼠标点击，而不会更改鼠标光标的位置。设置hoverEnabled属性确保使用为onPositionChanged，onEntered和onExited定义的处理程序，并且即使没有按下鼠标按钮，也会更新containsMouse属性。

例

下面示例在Rectangle中使用MouseArea，在单击时将Rectangle颜色更改为红色：

1
2
3
4
5
6
7
8
9
10
import QtQuick 2.0
Rectangle {
    width: 100; height: 100
    color: "green"

    MouseArea {
        anchors.fill: parent
        onClicked: { parent.color = 'red' }
    }
}

许多 MouseArea的信号传递一个鼠标，其中包含有关鼠标事件的附加信息，如位置，按钮和任意键修饰符参数。
这是前面示例的扩展，在右键单击区域时会产生不同的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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';
        }
    }
}

要指定MouseArea将对多个按钮做出反应，Qt :: MouseButtons标志值将使用“|” （或）运算符： 

1
MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton }

为了指示要接受所有可能的鼠标按钮，可以使用特殊值“Qt.AllButtons”：

1
MouseArea { acceptedButtons: Qt.AllButtons }

为了只为一个区域设置鼠标光标形状而不对鼠标事件做出反应，将acceptedButtons设置为none：

1
MouseArea { cursorShape: Qt.IBeamCursor; acceptedButtons: Qt.NoButton }

以下示例显示可以沿X轴拖动的Rectangle，向右拖动时，矩形的不透明度减小：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
        }
    }
}

注意：如果项目被锚定为所请求的项目，则无法将其拖动drag.axis。例如，如果在上述示例中设置为anchors.left或，则无法沿X轴拖动。这可避免通过设定锚值定义在onPressed处理程序。
如果drag.filterChildren设置为true，拖动可以覆盖后代MouseAreas。这使父级MouseArea能够处理拖动，例如，当后代处理点击时：
drag.threshold确定当拖动操作应该开始时的阈值（以像素为单位）。默认情况下，它绑定到一个平台相关的值。
如果drag.smoothed是true，则仅在拖动操作开始后移动目标。如果设置为false，目标将直接移动到当前鼠标位置。默认情况下，该属性为true。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Rectangle {
    width: 480
    height: 320
    Rectangle {
        x: 30; y: 30
        width: 300; height: 240
        color: "lightsteelblue"

        MouseArea {
            anchors.fill: parent
            drag.target: parent;
            drag.axis: "XAxis"
            drag.minimumX: 30
            drag.maximumX: 150
            drag.filterChildren: true

            Rectangle {
                color: "yellow"
                x: 50; y : 50
                width: 100; height: 100
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log("Clicked")
                }
            }
        }
    }
}

当按下鼠标右键时，下面的代码显示“right”：

1
2
3
4
5
6
7
8
9
10
11
Text {
    text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter

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

下面的例子是一个黄色的矩形包含一个蓝色的矩形。蓝色矩形是视觉堆叠顺序的层次结构中最顶层的项目;它将在黄色矩形上方可视地呈现。由于蓝色矩形设置propagateComposedEvents为true，并且还设置的MouseEvent::接受为false，所有接收到的clicked事件，任何clicked接收到的事件被传播到鼠标区域其下方的黄色矩形：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Rectangle {
    color: "yellow"
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("clicked yellow")
    }

    Rectangle {
        color: "blue"
        width: 50; height: 50

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("clicked blue")
                mouse.accepted = false
            }
        }
    }
}

单击蓝色矩形将导致调用onClicked其子MouseArea的处理程序；然后，事件将被传播到鼠标区域黄色矩形的，从而导致其自身的onClicked要被调用的处理程序。
这个属性大大简化了当你想有重叠的MouseAreas处理组合的事件在一起的用法。例如：如果你想要一个MouseArea处理clicked信号和另一个处理pressAndHold，或者如果你想要一个MouseAreaclicked大部分时间处理，但在满足某些条件时通过它。

下面的例子显示了两个MouseAreas之间的一个相当典型的关系，mouseArea2在顶部mouseArea1。移动鼠标到mouseArea2从mouseArea1将导致mouseArea1以发射exited信号：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Rectangle {
    width: 400; height: 400
    MouseArea {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true
    }
    MouseArea {
        id: mouseArea2
        width: 100; height: 100
        anchors.centerIn: parent
        hoverEnabled: true
    }
}

相反，如果你给两个MouseAreas父子关系，移动鼠标到mouseArea2离mouseArea1会不会导致mouseArea1发射exited。相反，它们将被认为是同时悬停。

您可能对下面的文章也感兴趣
------本文结束    感谢阅读------
你打赏你的,我分享我的！