How to handle mouse event in overlapped mouse areas in qml

JoeCFD

A control panel inside main window is showed/hidden by mouse click anywhere inside main window.

import QtQuick          2.15
import QtQuick.Controls 2.15
import QtQuick.Window   2.15

import isp.stylesheet 1.0

ApplicationWindow 
{
    id: mainWindow

    ControlPanel {
        id: controlPanel
    }

    MouseArea {
        anchors.fill: parent

        onClicked: {
            toggle display of controlPanel
        }
    }  
}

Control panel

import QtQuick          2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts  1.15

Rectangle {
    opacity: 0.5
    z: 1

    RowLayout {
        id: rowLayout
        anchors.fill: parent

        Button {
            id: settingsButton
            Layout.fillHeight: true
            Layout.alignment:  Qt.AlignLeft
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
        }

        Rectangle {
            id: statusButton
        
            ColumnLayout {
                anchors.fill: parent
                spacing: 20
                    
                Image {
                    Layout.alignment: Qt.AlignCenter
                    source: ***
                    sourceSize.height: 100
                    fillMode: Image.PreserveAspectFit
                }
        
                Image {
                    Layout.alignment: Qt.AlignCenter
                    source: ***
                    sourceSize.height: 100
                    fillMode: Image.PreserveAspectFit
                }          
                
                Text {
                    color: "white"
                    font.bold : true
                    Layout.alignment:  Qt.AlignCenter
                    text: "Status"
                }
            }
        
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    mouse.accepted = true;
                    console.log("Status button clicked!")
                }
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
        }

        Button {
            id: exitButton
            Layout.fillHeight: true
            Layout.alignment:  Qt.AlignRight
            width: parent.height * 1.5

            background: Image {
                source: "***"
                anchors.fill: parent
                fillMode: Image.PreserveAspectFit
                antialiasing: true
            }

            onClicked: {
                mainWindow.close()
            }
        }
    }
}

The two buttons inside control panel work fine. Mouse area in status button overlaps the mouse area inside mainWindow. Therefore, there is no mouse event in status button when mouse is clicked. One way to handle this problem is to check if the mouse click location is inside the button or not. But this looks a bit awkward. I think there must be some easy ways to handle this scenario. Any help will be appreciated.

JoeCFD

from here
https://forum.qt.io/topic/89608/how-does-qt-handle-overlapping-mouse-areas/2

higher z value is set in status button. No help.

swurl

Use propagateComposedEvents on the root MouseArea. In your onClicked handler make sure to set the event's accepted property to false if you want to propagate it down.

JoeCFD

@swurl Thank you for your reply. Tried this in main window

    MouseArea {
        anchors.fill: parent
       propagateComposedEvents: true

        onClicked: (mouse)=> {
            mouse.accepted = false
            toggle display of controlPanel
        }
    }

Still no output: "Status button clicked!"

JoeCFD

Replaced Rectangle with Button. The status button works now. But the issue is not solved.
Mark this as solved for now and will revisit this problem later.