Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Can a MouseArea be a root - or parent - of components?



  • Is there a reason why a MouseArea may not be a root or parent of a component hierarchy? E.g is the below demo code correct, and if not, why?

        Rectangle
        {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.right: parent.right
            height: 200
            color: "#96da50"
    
            MouseArea
            {
                anchors.fill: parent
                hoverEnabled: true
    
                onEntered:                            {console.log("Test - Outer rect - Mouse Entered");}
                onExited:                             {console.log("Test - Outer rect - Mouse Exited");}
                onPressed:       function(mouseEvent) {console.log("Test - Outer rect - Mouse Pressed");}
                onReleased:      function(mouseEvent) {console.log("Test - Outer rect - Mouse Released");}
                onClicked:       function(mouseEvent) {console.log("Test - Outer rect - Mouse Clicked");}
                onDoubleClicked: function(mouseEvent) {console.log("Test - Outer rect - Mouse Double Clicked");}
    
                Rectangle
                {
                    anchors.fill: parent
                    anchors.margins: 25
                    color: "#f01288"
    
                    MouseArea
                    {
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
    
                        onEntered:                            {console.log("Test - Inner rect - Mouse Entered");}
                        onExited:                             {console.log("Test - Inner rect - Mouse Exited");}
                        onPressed:       function(mouseEvent) {console.log("Test - Inner rect - Mouse Pressed");}
                        onReleased:      function(mouseEvent) {console.log("Test - Inner rect - Mouse Released");}
                        onClicked:       function(mouseEvent) {console.log("Test - Inner rect - Mouse Clicked");}
                        onDoubleClicked: function(mouseEvent) {console.log("Test - Inner rect - Mouse Double Clicked");}
                    }
                }
            }
        }
    

  • Moderators

    @jeanmilost if you take a look at the drag section of the documentation
    https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#drag-prop

    you will see an example where MouseArea contains a Rectangle...

    So I would say yes, it can be the parent of another component 🤷‍♂️

    Why don't you test it?


  • Moderators

    @jeanmilost if you take a look at the drag section of the documentation
    https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#drag-prop

    you will see an example where MouseArea contains a Rectangle...

    So I would say yes, it can be the parent of another component 🤷‍♂️

    Why don't you test it?



  • @J-Hilk Thank you for your reply. In fact I tested that and it worked well on my side, but the reason for why I asked a such question is because my supervisor was in doubt about that, and I was not able to certify my answer, as I assumed that should work this way, but I hadn't seen any example nor found any information to confirm my assumption. So I preferred ask this question on the forum instead of continue to suppose and take the risk to remain in error.

    So as a such hierarchy is used in official Qt examples, I think it's safe to use a similar hierarchy in my projects.

    One more time, thank you very much.



  • @jeanmilost if I may offer one other criteria that I personally adhere to when deciding if my QML is "valid" or not...

    I have learned to be extremely averse to any "qml warnings." These warnings appear at runtime (not compile time, since QML is not compiled). Understandably, the QML engine tries very hard to never crash or halt the application. Therefore, however, the "strongest" tool that the QML engine has for signalling to you that your QML went sideways is merely to log a warning in the console logs.

    In other words, I recommend that all QML warnings be treated like errors and remedied as soon as they crop up.

    I subject all my apps to automated tests that use (in part) this script: https://github.com/219-design/qt-qml-project-template-with-ci/blob/master/tools/gui_test/check_gui_test_log.py#L17

    As shown in that script, if my app has any of the QML warnings listed:

        "Detected anchors on an item that is managed by a layout",
        "ReferenceError:",
        "Unable to assign",
        "unregistered datatype",
        "Model size of",  # "...is less than 0" AND/OR "...is bigger than upper limit"
        "failed to load component",
        "QML LoaderImage",
        "Failed to get image from provider",
    

    Then that app fails its tests and should not be merged.

    So if I were "negotiating" the acceptability of your code with your supervisor, then in addition to what @J-Hilk already shared, I would look at:

    1. Does the code do what you need it to do, and...
    2. Does it run without producing any warnings?


  • @KH-219Design Yes, I agree completely with this assertion, and in fact I already apply it since long time ago.

    @KH-219Design said in Can a MouseArea be a root - or parent - of components?:

    Does it run without producing any warnings?

    There are indeed no warnings about a such hierarchy in my output logs. To be honest, I got many more warnings, errors and difficulties by trying to separate my components and mouse area hierarchies. More one point for the mixed mouse area and components hierarchy.


Log in to reply