长按后拖动

Question

我想在长按后拖动我的自定义按钮 QML。我已经实现了这种行为，但是问题是在启用后drag，我需要再次按下按钮才能真正开始拖动。如果我想在长按后不松开而移动按钮，我应该如何实现这种机制？

这是我的按钮代码（onReleased并且onLongPressed是我自己的信号）：

ButtonWidget.SoftButtonUI
{
    id:softButtonDelegate2
    x:500
    y:300
    labelText: "button"
    iconImageSource: path
    isGrayedOut: false

    Drag.active: dragArea2.drag.active
    Drag.hotSpot.x: 10
    Drag.hotSpot.y: 10
    onReleased:
    {
        console.log("onClicked")
    }

    onLongPressed:
    {
        console.log("onLongPressed")
        dragArea2.enabled = true
    }

    MouseArea {
        id: dragArea2
        enabled: false
        anchors.fill: parent
        drag.target: parent
        onReleased: parent.Drag.drop()
        onClicked: {
            console.log("MouseArea onClicked")
        }
        onPressAndHold: {
            console.log("MouseArea  onPressAndHold")
        }
    }
}

任何的想法？

Answer 1

一般来说，您可以连接不同的信号并连接操作，如本页所述。您应该看一下它，因为它充满了很好且有用的信息。

然而，当涉及到鼠标事件时，MouseEvents 接受给出了一种有趣的事件串联方法。文档说MouseEvent::accepted：

将 Accepted 设置为 true 可防止鼠标事件传播到该项目下方的项目。通常，如果该项目作用于鼠标事件，则应该接受该项目，以便堆叠顺序中较低的项目也不会响应同一事件。

在这种情况下，我们可以采取相反的方法，不接受事件。这样，该事件即可pressed用于激活拖动并实际执行它。然后可以在拖动结束时发生的事件中（隐式）接受。MouseEventrelease

这是遵循此方法的一个简单示例。当按下并按住鼠标时，drag.target会被设置并开始拖动，而当释放鼠标时，会被drag.target删除，从而消除拖动行为。要测试它，只需在矩形上按住鼠标，当它改变颜色时，只需拖动它即可。

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    width: 300
    height: 300
    visible: true

    Rectangle {
        id: item
        border.width: 2
        x: 100
        y: 100
        width: 100
        height: 100
        state: "BASE"

        states: [
            State {
            name: "BASE"
            PropertyChanges { target: mouseArea; drag.target: undefined}
            PropertyChanges { target: item; color: "steelblue"}
        },
            State {
            name: "DRAGGABLE"
            PropertyChanges { target: mouseArea; drag.target: item}
            PropertyChanges { target: item; color: "darkblue"}
        }
        ]


        MouseArea {
            id: mouseArea
            anchors.fill: parent
            drag{
                // target:  NOT SET HERE
                minimumX: 0
                minimumY: 0
                maximumX: parent.parent.width - parent.width
                maximumY: parent.parent.height - parent.height
                smoothed: true
            }

            onPressAndHold: {
                item.state = "DRAGGABLE"
                mouse.accepted = false      // mouse event is USED but NOT CONSUMED...
            }

            onReleased: {
                item.state = "BASE"         // mouse event acceptation occurs here!
            }
        }
    }
}

这种简单的方法应该也可以与您的自定义信号完美配合。