Detect press and hold of a Button in QML

Question

I'd like to open a context menu when a user presses and holds a Button (I use Button for convenience). If I do

    Button
    {
        text: model.ualabel

        MouseArea
        {
            preventStealing: true
            anchors.fill: parent
            onPressAndHold: uaContextMenu.open()
        }

        ContextMenu
        {
            id: uaContextMenu
            MenuLayout
            {
                MenuItem { /**/ } 
            }
        }
    }

then the MouseArea responsible for pressAndHold steals all gestures even though and the Button cannot be clicked. What am I doing wrong? I'm using Qt 4.7 and importing QtQuick 1.1 and com.nokia.meego 1.0

Thanks

Solution 1

I've found that press-and-hold can be simulated on QML's Button like this:

Button {
    id: button

    signal pressAndHold()

    Timer {
        id: longPressTimer

        interval: 2000 //your press-and-hold interval here
        repeat: false
        running: false

        onTriggered: {
            button.pressAndHold()
        }
    }


    onPressedChanged: {
        if ( pressed ) {
            longPressTimer.running = true;
        } else {
            longPressTimer.running = false;
        }
    }
}

Solution 2

The problem is your mouse area is competing with the Button's mouse area to receive mouse events. Try setting propogateComposedEvents: true on your mouse area and this should allow event to propogate downwards in the visual stack to the button's mouse area. Refer to http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#propagateComposedEvents-prop for more details.

After reading the comments, my new suggestion is to manually propagate the clicked signal in your mouseArea to the button. This should be doable by calling buttonId.clicked() which will manually emit the clicked signal on your button.

Solution 3

QML Button has own pressAndHold() signal, so you can use it.

    Button {

        text: model.ualabel

        ContextMenu
        {
            id: uaContextMenu

            MenuLayout
            {
                MenuItem { /**/ } 
            }
        }

        onPressAndHold: uaContextMenu.open()
    }

Comments

[marmistrz]

Manual propagating won't be ideal as the Button won't change the color on pressed.

[marmistrz]

But I'm using Qt 4.7 and I can't do this: harmattan-dev.nokia.com/docs/library/html/qt4/…

[Deadron]

Then you cannot use the Button component without modifying it to have the mouse event you want. This is not actually that difficult though the control is open source and fairly simple. Just copy the code into a new qml file in your local project and make local changes. Although, I'm not entirely certain of what license restrictions there are on this project.

[marmistrz]

The problem is ImplicitSizeItem which isn't a qml file

[Deadron]

hmmm as a last ditch attempt you could have your mouse area handle the clicked signal and in the handler navigate the internal structure of the Button from your Mouse Area and find the internal MouseArea and manually emit the clicked signal.

[marmistrz]

Tried this... But QML complains that pressed is read-only (this is needed to do the animation)

[fiscblog]

Maybe you want to clarify to which version of Qt this answer applies. The question is tagged qt4.