QML mouse event propagation and Auto Hide/Show functionality

? Offline

Dear All,

I'm having some troubles in getting this (apparently to me easy) behaviour implemented in QML
I have an ApplicationWindow with a Rectangle and a ToolBar within the rectangle.

What I would like to achieve is to show the toolbar when the mouse is over it and hide it when the mouse leaves.
Of course when the toolbar is visible all its buttons(tools) needs to be fully working.

With the sample code that I've included in this post I can't achieve none of my requirements.
The states on my code are commented out as otherwise I won't see at all the toolbar,
I guess because the HiddenState will be the one active as the mouseArea.containsMouse will be initially false.

What's I'm missing?
Thanks a lot for all your help.

Ben

Here is the code that I'm using:

@import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
title: qsTr("Hello World")
width: 512
height: 480
visible: true

Rectangle{
    id: me
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    height: 50
    visible: true
    ToolBar {
        id: toolBar
        clip: true
        anchors.fill: parent
         style: ToolBarStyle {
            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            }
            background: Rectangle {
                anchors.fill: parent
                border.color: "#999"
                gradient: Gradient {
                    GradientStop { position: 0 ; color: "#000" }
                    GradientStop { position: 1 ; color: "#eee" }
                }
            }
        }
        RowLayout {
            anchors.fill: parent
            spacing: 6
            ToolButton {
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                text : "123"
            }
        }
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true         //this line will enable mouseArea.containsMouse
            propagateComposedEvents: true
            onClicked: {
                console.log("clicked on the toolbar")
                mouse.accepted = false
            }
        }
        /*states: [
        State {
            name: "VisibleState"
            when: mouseArea.containsMouse

            PropertyChanges {
                target: toolBar
                visible: true
            }
        },
        State {
            name: "HiddenState"
            when: !mouseArea.containsMouse

            PropertyChanges {
                target: toolBar
                visible: false
            }
        }]*/

    }

}

}
@

shav

Hi,

Add to MouseArea tow signals onEntered and onExit. The first signal emitted when mouse coordinate into object. The second signal emitted when mouse leave object. Your example must looks like:
@
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
title: qsTr("Hello World")
width: 512
height: 480
visible: true

Rectangle{
    id: me
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    opacity: 0.0
    height: 50
    visible: true
    ToolBar {
        id: toolBar
        clip: true
        anchors.fill: parent
         style: ToolBarStyle {
            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            }
            background: Rectangle {
                anchors.fill: parent
                border.color: "#999"
                gradient: Gradient {
                    GradientStop { position: 0 ; color: "#000" }
                    GradientStop { position: 1 ; color: "#eee" }
                }
            }
        }
        RowLayout {
            anchors.fill: parent
            spacing: 6
            ToolButton {
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                text : "123"
            }
        }
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true         //this line will enable mouseArea.containsMouse
            propagateComposedEvents: true

            onEntered: {
                me.opacity = 1.0;
            }

            onExited: {
                me.opacity = 0.0;
            }

            onClicked: {
                console.log("clicked on the toolbar")
                mouse.accepted = false
            }
        }

        Behavior on opacity { NumberAnimation {duration: 300} }
    }
}

}
@

I've use opacity because you can use animation for opacity property. If you use visible you can't implement animation. Also when element is visible = false this element can't receive event of mouse. So use opacity property to show/hide element.

? Offline

Hi Shav, thanks a lot for your reply.
The solution you provided works well if I need to show a fade out\in effect, but what if I need to hide the toolbar by sliding it up?
Also unfortunately with the solution you provided I'm still not able to press any button within the toolbar.
On a side note I would like to implement the behaviour that I want via a state machine instead of signal handlig.

Any thoughts about how to achieve the desired behaviour ?

Thanks a lot for all the help,

Ben

? Offline

Hi,
I have the same issue.
Seems this is a bug in Qt and no one cares about to fix it
https://bugreports.qt.io/browse/QTBUG-37545