长按后拖动

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

一般来说，您可以按照本 page 中的讨论连接不同的信号和连接操作。你应该看看它，因为它充满了有用的信息。

但是，当涉及到鼠标事件时，MouseEvent接受了一种有趣的事件串联方法。 Documentation 说 MouseEvent::accepted：

Setting accepted to true prevents the mouse event from being propagated to items below this item. Generally, if the item acts on the mouse event then it should be accepted so that items lower in the stacking order do not also respond to the same event.

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

这是遵循这种方法的一个简单示例。当按住鼠标时 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!
            }
        }
    }
}

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

长按后拖动

Drag after long press

qt

drag

qml

qtquick2