How can detect Item Contains mouse when it's child uses Mouse Hover.

[Danima]

I Have a rectangle an a toolbar on top of it. I want when mouse leave rectangle Hide the toolbar. If I write a MouseArea after toolbar, items inside toolbar doesn't receive mouse hover and some effect like glowing buttons an others fail.
If I move mouse are before toolbar when i go over button mouseare containsMouse become false and toolbar going to hide.
How can Deal this with assumption that Items in toolbar is not dedicated.

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Rectangle {
    implicitWidth: 300
    implicitHeight: 150
    color: "transparent"
    border.color: "green"
    clip: true



    MouseArea
    {
        id:mouseArea
        anchors.fill: parent
        acceptedButtons:Qt.NoButton
        propagateComposedEvents : true
        hoverEnabled:true
    }


    RowLayout
    {
        id:zoomToolBar
        y : -zoomToolBar.height
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.leftMargin: 5
        anchors.topMargin: 5
        layoutDirection: Qt.RightToLeft
        spacing: 5

        Behavior on y
        {
            NumberAnimation {
                duration: 250
            }
        }


        state:mouseArea.containsMouse ? "show" : "hide"

        states: [
                State {
                    name: "hide"
                    PropertyChanges { target: zoomToolBar; y: - zoomToolBar.height }
                },
                State {
                    name: "show"
                    PropertyChanges { target: zoomToolBar; y: 5 }
                }
            ]

        Button
        {
            padding:0
            leftPadding: 3
            rightPadding: 3
            Layout.fillHeight: true;
            flat:true
            text:"En"
            checkable: true

        }

        //other buttons



        Item {//filler
            Layout.fillWidth: true;
        }

    }
    
//    MouseArea
//    {
//        id:mouseArea
//        anchors.fill: parent
//        acceptedButtons:Qt.NoButton
//        propagateComposedEvents : true
//        hoverEnabled:true
//    }

}

[J.Hilk]

@Danima additionally to setting propagateComposedEvents : true you also have to explicitly listen to the mouse events and set them accepted to false like:

pressed: accepted = false

otherwise the event is not forwarded to the underlying components
in essence every Signal that has mouse in parentheses

[Danima]

@J-Hilk
I I do not accept any button in my MuseArea because I set acceptedButtons:Qt.NoButton.
and implementation of toolbar child's is not changeable.

[J.Hilk]

@Danima

Ok, reading through your question again, you can also do the following:
Listen to the hover property of your MouseArea and of those of your buttons!

eg:

readonly property mouseInToolbar: mouseArea.containsMouse || myButton1.containsMouse || ... || myLastButton.containsMouse

....
state: mouseInToolbar ? "show" : "hide"

hover needs to be enabled for all Buttons of course

[Danima]

@J-Hilk
I need a solution that can be easy and practical for all conditions.
You suppose another person codded toolbar and its like black box for you.
if number of buttons or item,menu growth, or if you use dynamic object creation in toolbar this solution is not practical.

[J.Hilk]

@Danima alright, back to my first suggestion

here a working (generic)solution

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    width: 640
    height: 200
    title: qsTr("Hello World")
    id:root


    Rectangle {
        anchors.fill: parent
        implicitWidth: 300
        implicitHeight: 150
        color: "transparent"
        border.color: "green"
        border.width: 2
        clip: true



//        MouseArea
//        {
//            id:mouseArea
//            anchors.fill: parent
//            acceptedButtons:Qt.NoButton
//            propagateComposedEvents : true
//            hoverEnabled:true
//        }


        RowLayout
        {
            id:zoomToolBar
            y : -zoomToolBar.height
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.leftMargin: 5
            anchors.topMargin: 5
            layoutDirection: Qt.RightToLeft
            spacing: 5


            Behavior on y
            {
                NumberAnimation {
                    duration: 250
                }
            }


            state:mouseArea.containsMouse ? "show" : "hide"

            states: [
                    State {
                        name: "hide"
                        PropertyChanges { target: zoomToolBar; y: - zoomToolBar.height }
                    },
                    State {
                        name: "show"
                        PropertyChanges { target: zoomToolBar; y: 5 }
                    }
                ]

            Button
            {
                padding:0
                leftPadding: 3
                rightPadding: 3
                Layout.fillHeight: true;
                flat:true
                text:"En"
                checkable: true

            }

            //other buttons



            Item {//filler
                Layout.fillWidth: true;
            }

        }

        MouseArea
        {
            id:mouseArea
            anchors.fill: parent
            acceptedButtons:Qt.NoButton
            propagateComposedEvents : true
            hoverEnabled:true

            onPressed: mouse.accepted = false
            onReleased: mouse.accpeted = false
            onClicked: mouse.accepted = false
        }

    }

}

[Danima]

@J-Hilk
I say it in first post if we move mouseArea to bottom every item top of it doesn't receive hover and every item become after (graphically top of that) it's hover event disrupt hiding mechanism.

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    width: 640
    height: 200
    title: qsTr("Hello World")
    id:root


    Rectangle {
        anchors.fill: parent
        implicitWidth: 300
        implicitHeight: 150
        color: "transparent"
        border.color: "green"
        border.width: 2
        clip: true


        Rectangle
        {
            id:rect2
            anchors.centerIn: parent
            width:100
            height:50
            color:mrect2.containsMouse ? "#88FF0000":"transparent"
            border.color: "green"
            MouseArea
            {
                id:mrect2
                anchors.fill: parent
                hoverEnabled:true
                acceptedButtons:Qt.NoButton
            }
            Text {
                anchors.centerIn: parent
                text: qsTr("rect2")
            }
        }


        RowLayout
        {
            id:zoomToolBar
            y : -zoomToolBar.height
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.leftMargin: 5
            anchors.topMargin: 5
            layoutDirection: Qt.RightToLeft
            spacing: 5


            Behavior on y
            {
                NumberAnimation {
                    duration: 250
                }
            }


            state:mouseArea.containsMouse ? "show" : "hide"

            states: [
                    State {
                        name: "hide"
                        PropertyChanges { target: zoomToolBar; y: - zoomToolBar.height }
                    },
                    State {
                        name: "show"
                        PropertyChanges { target: zoomToolBar; y: 5 }
                    }
                ]

            Button
            {
                padding:0
                leftPadding: 3
                rightPadding: 3
                Layout.fillHeight: true;
                flat:true
                text:"En"
                checkable: true

            }

            //other buttons



            Item {//filler
                Layout.fillWidth: true;
            }

        }

        MouseArea
        {
            id:mouseArea
            anchors.fill: parent
            acceptedButtons:Qt.NoButton
            propagateComposedEvents : true
            hoverEnabled:true

            onPressed: mouse.accepted = false
            onReleased: mouse.accpeted = false
            onClicked: mouse.accepted = false
        }


        Rectangle
        {
            id:rect1
            anchors.left: rect2.right
            width:100
            height:50
            color:mrect1.containsMouse ? "#88FF0000":"transparent"
            border.color: "green"
            MouseArea
            {
                id:mrect1
                anchors.fill: parent
                hoverEnabled:true
                acceptedButtons:Qt.NoButton
            }
            Text {
                anchors.centerIn: parent
                text: qsTr("rect1")
            }
        }

    }

}