如何从 QML 组件调用自定义信号？

Question

有没有办法从加载到其他地方的组件中的 mouseArea 调用信号？

当我点击矩形时，没有输入下例中的onClicked。

结构需要保持定义不变。为了能够定义一个对任何源应用阴影的 qml 组件

代码如下：

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

最后应该显示它现在做了什么，并且 mouseArea 应该可以工作。

Answer 1

当我点击矩形时，没有输入下例中的onClicked。

mainRectangle 不可见，不可见的项目不会获得输入事件。由于MouseArea 是mainRectangle 的孩子，它也不会得到事件。

最后应该显示它现在做了什么，并且 mouseArea 应该可以工作。

不用隐藏源项并使用ShaderEffectSource，您可以直接在mainRectangle上设置opacity并使用item layers（链接有类似示例），以确保不因透明度而重叠：

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