QML mouse event propagation and Auto Hide/Show functionality



  • 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
                }
            }]*/
    
        }
    
    }
    

    }
    @



  • 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.



  • 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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.