[SOLVED] Loader and MouseArea issues.

[goblincoding]

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!

[shav]

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");
                }
            }
        }
    }
}

@

[p3c0]

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
}
}
}
@

[goblincoding]

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.

[p3c0]

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
}

}
@

[goblincoding]

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!

[p3c0]

You're Welcome :) Happy Coding..