[SOLVED] Loader and MouseArea issues.



  • Good day everyone,

    I am struggling with a situation where I am using a Loader to display a Component (which wraps an Image), which works great for the display, but the issue I am having is that the (now correctly displaying) Item does not seem to trigger mouse events.

    For example, I have a QML object defined in its own file that looks roughly like this:

    @
    Rectangle {
    id: rect

    // bunch of properties, logic, etc   
    
    Item {
        Loader { id: buttonLoader }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                // do stuff
            }
        }
    }
    

    }
    @

    I can set the Loader's sourceComponent using property states (I left that logic out of the above code) and it works fine. However, the MouseArea logic never gets hit, i.e. the MouseArea is inactive/not created/who knows?

    Any advice? I am happy to provide more code if the above proves insufficient, I just thought it easiest not to spam the first post with reams of QML.

    Thanks!



  • Hi,

    Try this code:
    @
    Rectangle {
    id: view
    width: 300
    height: 300
    color: "green"

        Loader {
            id: loader
            anchors.fill: parent
            sourceComponent: loaderComponent
        }
    
        Component {
            id: loaderComponent
    
            Image {
                id: img
                width: sourceSize.width
                height: sourceSize.height
                source: "some_image.png"
    
                MouseArea {
                    anchors.fill: parent
    
                    onClicked: {
                        console.log("test code");
                    }
                }
            }
        }
    }
    

    @


  • Moderators

    bq. Any advice? I am happy to provide more code if the above proves insufficient, I just thought it easiest not to spam the first post with reams of QML.

    May be you should try specifying size to the Item element.

    @
    Item { //<- specify size to this, or anchors.fill: parent should work too
    Loader { id: buttonLoader }
    MouseArea {
    anchors.fill: parent
    onClicked: {
    // do stuff
    }
    }
    }
    @



  • Thanks for the replies. Your answers have helped further my understanding of where the issue might lie.

    I think it is due to the fact that I do not actually know the size of the component until the underlying image is loaded since my QML objects are created dynamically. I.e. in my example, I was hoping that Rectangle would automatically get the size of Item which would be the size of whatever the Loader object loaded and that, subsequently, MouseArea would also cover the same area.

    Seems that this is obviously not the case...guess I will have to figure out how I can set these object sizes dynamically as well.


  • Moderators

    bq. I was hoping that Rectangle would automatically get the size of Item which would be the size of whatever the Loader object loaded and that..

    No, not automatically, only the Image element gets resized to that of source's size.
    To make this working you bind size of Loader Item (Image) to that of Rectangle.

    @
    import QtQuick 2.0

    Rectangle {
    width: buttonLoader.item ? buttonLoader.item.width : 0
    height: buttonLoader.item ? buttonLoader.item.height : 0

    Item {
        anchors.fill: parent
        Loader {
            id: buttonLoader
            anchors.fill: parent
    
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("MS Clicked")
            }
        }
    }
    
    Component {
        id: comp
        Image {
            anchors.fill: parent
            source: "file:///home/as/15686.png"
        }
    }
    
    Timer {
        interval: 1000; running: true; repeat: false
        onTriggered: buttonLoader.sourceComponent = comp
    }
    

    }
    @



  • Thanks a lot for that p3C0, I had to make one or two small alterations to ensure that my images and mouse areas line up, so my class now resembles this:

    @
    import QtQuick 2.0

    Rectangle {
    id: button
    color: "transparent"

    Item {
        Loader {
            id: buttonLoader
        }
    
        MouseArea {
            x: buttonLoader.item ? buttonLoader.item.x : 0
            y: buttonLoader.item ? buttonLoader.item.y : 0
            width: buttonLoader.item ? buttonLoader.item.width : 0
            height: buttonLoader.item ? buttonLoader.item.height : 0
    
            onClicked: {
                console.log("Clicked!")
            }
        }
    }
    
    Component {
        id: activity_icon_active_component
        Image {
            source: "images/activity_icon_active.png"
            x: 8
            y: 389
            opacity: 1
        }
    }
    
    Timer {
        interval: 1000; running: true; repeat: false
        onTriggered: {
            buttonLoader.sourceComponent = activity_icon_active_component
        }
    }
    

    }
    @

    Thanks again!


  • Moderators

    You're Welcome :) Happy Coding..


Log in to reply
 

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