How can I call a custom signal from a QML Component?

Question

Is there a way to call a signal from a mouseArea included in a component which is loaded somewhere else?

onClicked in the example below is not entered when i click on the rectangle.

The structure needs to remain as defined. To be able to define a qml component that applies a shadow to any source

Here is the code:

Window{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item
    {
        id: mainRectangle
        anchors.centerIn: parent
        width: loaderId.width + 60
        height: loaderId.height + 60

        Rectangle {
            id: rect2
            anchors.right: mainRectangle.right
            anchors.top: mainRectangle.top
            anchors.rightMargin: -30
            anchors.topMargin: -30
            width: 100
            height: 100
            color: "red"
            opacity: 0.5
        }

        Loader {
            id: loaderId
            anchors.centerIn: parent
            sourceComponent: component
            active:true
        }
        visible: false
    }

    ShaderEffectSource {
        id: shader
        anchors.fill: mainRectangle
        anchors.margins: -30
        sourceItem: mainRectangle
        opacity: 0.5
        visible: true
    }

    Component {
        id: component
        Rectangle {
            id: rect
            width: 100
            height: 100
            color: "black"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked!")
                    // call a signal from here
                }
            }
        }
    }
}

In the end the should show what it does now and the mouseArea should work.

Add a signal you want to fire to the root item, rect in your case. For example signal mySignal() and so call it from where you need root.mySignal() — folibis
That won't work as long as the MouseArea isn't visible and hence isn't getting events. — Mitch
Managed to do it with layer.enabled, and layer.effect. @Mitch would you like to add the solution because you pointed it out. Thanks :) — Mihai
OK, let me know if I got it right. I don't have the effect so the answer doesn't use that. — Mitch

Mitch Mitch · Accepted Answer · 2018-09-08T13:44:21

onClicked in the example below is not entered when i click on the rectangle.

mainRectangle is not visible, and items that aren't visible don't get input events. Since the MouseArea is a child of mainRectangle, it won't get events either.

In the end the should show what it does now and the mouseArea should work.

Instead of hiding the source item and using ShaderEffectSource, you can set the opacity directly on mainRectangle and use item layers (the link has a similar example) to ensure that there is no overlap due to transparency:

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: mainRectangle
        anchors.centerIn: parent
        width: loaderId.width + 60
        height: loaderId.height + 60
        opacity: 0.5
        layer.enabled: true

        Rectangle {
            id: rect2
            anchors.right: mainRectangle.right
            anchors.top: mainRectangle.top
            anchors.rightMargin: -30
            anchors.topMargin: -30
            width: 100
            height: 100
            color: "red"
        }

        Loader {
            id: loaderId
            anchors.centerIn: parent
            sourceComponent: component
            active: true
        }
    }

    Component {
        id: component
        Rectangle {
            id: rect
            width: 100
            height: 100
            color: "black"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked!")
                    // call a signal from here
                }
            }
        }
    }
}

How can I call a custom signal from a QML Component?

1 Answers