QML类型：MouseArea

最新推荐文章于 2024-09-11 17:32:16 发布

友善啊，朋友

最新推荐文章于 2024-09-11 17:32:16 发布

阅读量3.4k

点赞数 3

分类专栏： # QML类型文章标签： qml qt

本文链接：https://blog.csdn.net/kenfan1647/article/details/120526682

版权

QML类型专栏收录该内容

44 篇文章 83 订阅

订阅专栏

一、描述

MouseArea 是一个不可见项，通常与可见项结合使用，以便为该项提供鼠标处理。通过有效地充当代理，鼠标处理的逻辑可以包含在 MouseArea 项中。

二、属性成员

1、mouseX : real

mouseY : real

光标的坐标。坐标是相对于 MouseArea 的。

如果 hoverEnabled 属性为false：这两个属性仅在按下鼠标按键时有效，并且只要按住鼠标按键，即使光标移出区域外也将保持有效。

如果 hoverEnabled 为 true，则这两个属性在以下情况下有效：

未按下任何鼠标按键，但光标位于 MouseArea 内（containsMouse 为 true）。
一个鼠标按键被按住，即使光标已经移出该区域。

2、acceptedButtons : Qt::MouseButtons

此属性保存鼠标区域响应的鼠标按键。默认值：Qt.LeftButton

响应多个按键：

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

响应所有按键：

MouseArea
{ 
    acceptedButtons: Qt.AllButtons 
}

3、containsMouse : bool

光标当前是否在鼠标区域内。

如果 hoverEnabled 为 false，则此属性仅在光标位于 MouseArea 内时按下鼠标时为true。

4、containsPress : bool

这是一个等同于 press && containsMouse 的便利属性，即当前是否按下了任何接受的按钮且光标当前是否在 MouseArea 内。

此属性对于在其边界内按下鼠标时突出显示项目特别有用。

5、cursorShape : Qt::CursorShape

此鼠标区域的光标形状。默认值：Qt.ArrowCursor QCursor

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

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

6、拖动组

drag.active : bool — 当前是否正在拖动目标项目。

drag.axis : enumeration — 拖动类型：

水平 (Drag.XAxis)
垂直 (Drag.YAxis)
两者皆可 (Drag.XAndYAxis)

drag.filterChildren : bool — 如果为 true，则拖动可以覆盖子项 MouseAreas。

限制目标可以沿相应轴拖动的距离：

drag.maximumX : real
drag.maximumY : real
drag.minimumX : real
drag.minimumY : real

drag.smoothed : bool ：默认为 true。

为 true，则在拖动操作开始后才会移动目标。
为 false，则目标将直接移动到当前鼠标位置。

drag.target : Item — 指定要拖动的项目的 id。

drag.threshold : real — 拖动操作开始时的阈值（以像素为单位）。默认情况下，这绑定到依赖于平台的值。

以下示例显示可沿 X 轴拖动的 Rectangle。当矩形向右拖动时，它的不透明度会降低。

    Rectangle 
    {
        id: container
        width: root.width;
        height: root.height;

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

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

默认不能拖动设置了锚值的项目，例如上面加上：anchors.left:parent.left 将无法拖动。

要拖动锚设置了锚值的项目，可设置：onPressed:rect.anchors.left = undefined

以下代码设置 drag.filterChildren:false

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

            MouseArea
            {
                anchors.fill: parent
                drag.target: rect
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: container.width - rect.width
                drag.filterChildren:false
                Rectangle
                {
                    id:childrenRectangle
                    color: "blue"
                    width: 30; height: 30
                    anchors.bottom: rect.bottom
                    anchors.right: rect.right
                    MouseArea
                    {
                        anchors.fill: parent
                        onPressed: console.log("123");
                    }
                }
            }
        }
    }

点击蓝色部分不能拖动，设置drag.filterChildren:true即可覆盖子项的 MouseAreas。

7、enabled : bool

此属性保存项目是否接受鼠标事件。默认为 true。

注意：由于历史原因，该属性不等同于 Item.enabled。它只影响鼠标事件，它的影响不会传播到子项。

8、hoverEnabled : bool

此属性保存是否处理悬停事件。默认为false。

此属性影响 containsMouse 属性以及 onEntered、onExited 和 onPositionChanged 信号。

9、pressAndHoldInterval : int

此属性会覆盖发出 pressAndHold()（长按）之前经过的时间（以毫秒为单位）。

这个属性是在 Qt 5.9 中引入的。

10、pressed : bool

此属性保存当前是否按下了任何已接受的按钮。

11、pressedButtons : MouseButtons

此属性保存当前按下的鼠标按钮。此属性只处理acceptedButtons 中指定的按钮。

它包含以下按位组合：

Qt.LeftButton
Qt.RightButton
Qt.MiddleButton

Text 
{
    text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""

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

12、preventStealing : bool

鼠标事件是否被过滤。如果设置为 true，则没有项目会过滤鼠标事件。默认为 false。

13、propagateComposedEvents : bool

此属性保存组合鼠标事件是否会自动传播到与此 MouseArea 重叠但在视觉堆叠顺序中较低的其他 MouseAreas。默认为 false。

MouseArea 包含多个组合事件：clicked（单击）、doubleClicked（双击）和 pressAndHold。这些组合事件由基本鼠标事件（如鼠标按下事件）组成，并且与基本事件相比可以以不同的方式传播。

如果设置为true，则组合事件将自动传播到场景中相同位置的其他MouseAreas。每个事件都按堆叠顺序传播到它下面的下一个启用的 MouseArea，直到 MouseArea 接受该事件。与基本事件不同，如果不存在处理程序，则不会自动接受组合事件。

    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: (mouse)=>
                {
                    console.log("clicked blue")
                    mouse.accepted = false
                }
            }
        }
    }