QML中增大MouseArea的控制区域

最新推荐文章于 2024-03-18 17:34:58 发布

原创最新推荐文章于 2024-03-18 17:34:58 发布 · 794 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qml

QT 同时被 2 个专栏收录

16 篇文章

订阅专栏

Linux 内核驱动

5 篇文章

订阅专栏

本文介绍了如何在Qt Quick (QML)中调整MouseArea的范围，使其在视觉组件难以点击时提供更大的操作区域，通过中心对齐并扩展边界来提高用户体验。详细步骤包括使用centerIn属性和自定义大小。

QML中增大MouseArea的控制区域

通常情况下，Mousearea的范围和可视组件的范围是一样的，但是有的时候可视组件太小，不好点，这时就希望能把MouseArea的范围变得大一点，在鼠标靠近可视组件的时候也能选中。方法很简单，不要使用anchor.fill=parent来设置Mousearea的范围，而使用anchors.centerIn: parent 来和可视组件中心对齐，然后再把Mousearea的范围扩大一点就可以了.

Rectangle {
    id: root
    width: 10
    height: width
    radius: width / 2
    border.width:  1
    border.color: "green"
    signal posChange(int xOffset, int yOffset)
    signal clicked(real x, real y)
    signal doubleClicked(real x, real y)
    onPosChange: {
        x += xOffset
        y += yOffset
    }

    MouseArea{
        //anchors.fill: parent

        anchors.centerIn: parent
        width: parent.width + 10
        height: parent.height + 10
        hoverEnabled: true
        property int lastX: 0   // mouseX 是当前光标与root中心点的偏移量，在拖动的过程中要保持光标和root中心的偏移量不变
        property int lastY: 0

        onEntered: {
            parent.border.color = "red"
        }
        onExited: {
            parent.border.color = "blue"
        }

        onPressedChanged: {
            if (containsPress) {
                lastX = mouseX;
                lastY = mouseY;
                console.log("onPressedChange")
            }
        }
        onPositionChanged: {
            if (pressed) {
                posChange(mouseX - lastX, mouseY - lastY)

                //console.log("onPositionChanged" + mouseX + "," + mouseY)
            }
        }
        onClicked: {
            root.clicked(mouseX, mouseY)
        }
        onDoubleClicked: {
            root.doubleClicked(mouseX, mouseY)
        }
    }
}